Настройка и размер изображения, чтобы соответствовать div (начальной загрузке)

71

Я пытаюсь получить изображение в соответствии с определенным размером div. К сожалению, изображение не соответствует ему и вместо этого пропорционально сокращается до размера, который недостаточно велик. Я не уверен, что лучший способ - добиться того, чтобы изображение было в нем помещено.

Если этого недостаточно, я буду рад предоставить больше, и я открыт для исправления любых других ошибок, которые я пропускаю.

Вот HTML

<div class="span3 top1">  
        <div class="row">
          <div class="span3 food1">
              <img src="images/food1.jpg" alt="">
          </div>
        </div>
            <div class="row">
              <div class="span3 name1">
                  heres the name
            </div>
            </div>
          <div class="row">
              <div class="span3 description1">
                  heres where i describe and say "read more"
            </div>
            </div>


      </div>

Мой CSS

.top1{

    height:390px;
    background-color:#FFFFFF;
    margin-top:10px;


}

.food1{

background-color:#000000;
height:230px;


}

.name1{

background-color:#555555;
height:90px;

}

.description1{

background-color:#777777;
height:70px;


}
Теги:

8 ответов

48
Лучший ответ

Вы можете явно определить изображения width и height, но результаты могут быть не самыми лучшими.

.food1 img {
    width:100%;
    height: 230px;
}

jsFiddle

... за ваш комментарий вы также можете заблокировать любой overflow - см. этот пример, чтобы увидеть изображение, ограниченное по высоте и отрезанное, потому что оно тоже широкий.

.top1 {
    height:390px;
    background-color:#FFFFFF;
    margin-top:10px;
    overflow: hidden;
}

.top1 img {
    height:100%;
}
Поделиться
  • 0
    Я пытался это сделать, к сожалению, как вы сказали, результаты не самые лучшие. В идеале, я бы хотел, чтобы изображения были уменьшены так, чтобы высота изображения соответствовала высоте div, а ширина изображения, которая превышает ширину ограничивающего div, была бы скрыта. Если это имеет смысл
  • 0
    Да, это то, что я ищу! Спасибо вам большое!
Показать ещё 2 комментария
125

Попробуйте так:

<div class="container"><div class="col-md-4" style="padding-left: 0px;  padding-right: 0px;">
        <img src="images/food1.jpg" class="img-responsive">
    </div>
</div>

ОБНОВИТЬ:

В Bootstrap 4 img-responsive становится img-fluid, поэтому решение с использованием Bootstrap 4:

<div class="container"><div class="col-md-4 px-0">
        <img src="images/food1.jpg" class="img-fluid">
    </div>
</div>
Поделиться
  • 2
    На самом деле это правильный метод начальной загрузки.
  • 5
    Здорово! класс = "img-отзывчивый" помог. Возможно, это должен быть принятый ответ сегодня.
Показать ещё 2 комментария
38

Просто голова, что Bootstrap 4 теперь использует img-fluid вместо img-responsive, поэтому дважды проверьте, какую версию вы используете, если у вас проблемы.

Поделиться
  • 3
    img-fluid делает это! Спасибо !
31

Просто добавьте класс img-responsive к вашему тегу img, он применим в bootstrap 3 onward!

Поделиться
  • 0
    Извините, но не могли бы вы быть конкретным, я не правильно понял ваш вопрос, Спасибо!
7

У меня была такая же проблема и наткнулся на следующее простое решение. Просто добавьте немного отступов к изображению, и он изменит размер, чтобы поместиться в div.

<div class="col-sm-3">
  <img src="xxx.png" class="img-responsive" style="padding-top: 5px">
</div>
Поделиться
  • 1
    Решено с помощью Bootstrap, а не пользовательского CSS. Спасибо.
4

Я использовал это и работает для меня.

<div class="col-sm-3">
  <img src="xxx.png" style="width: auto; height: 195px;">
</div>
Поделиться
2

Если кто-то из вас ищет Bootstrap-4. Вот

<div class="row no-gutters">
    <div class="col-10">
        <img class="img-fluid" src="/resources/img1.jpg" alt="">
    </div>
</div>
Поделиться
  • 0
    это не идеальное решение, если у вас есть еще один столбец с текстом в нем, так как он будет слишком жестким к краю границы
2

В большинстве случаев проект bootstrap использует jQuery, поэтому вы можете использовать jQuery.

Просто введите ширину и высоту родительского с JQuery.offsetHeight() и JQuery.offsetWidth() и установите их дочернему элементу с JQuery.width() и JQuery.height().

Если вы хотите сделать его отзывчивым, повторите описанные выше шаги в $(window).resize(func).

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню