Регулировка и размер изображения для соответствия div (бутстрап)

99

Я пытаюсь подогнать изображение под конкретный размер 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;


}

html css twitter-bootstrap

— smilefreak24
источник

Я опубликовал ответ на аналогичный вопрос здесь: stackoverflow.com/questions/41870216/…

— FredyWenger

57

Вы можете явно определить 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%;
}

— jterry
источник

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

— смысл

Да вот что я ищу! Спасибо вам большое!

— smilefreak24 09

ДРУГОЙ ответ - лучший, просто добавление class = "img-responsive" в тег img делает свое дело!

— iMobaio

1

Лучше от width:100%;есть max-width:100%;и лучше все они классно img-responsiveв BS3 или img-fluidв BS4.

— Nabi KAZ

170

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

<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>

— Shafeeque S
источник

5

Прохладно! class = "img-responsive" помогло. Возможно, сегодня это должен быть принятый ответ.

— Anupam

1

class = "img-responseive" определенно лучший способ! Это должен быть принятый ответ.

— iMobaio

28

это img-fluidсейчас, а неimg-responsive

— поводу

51

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

— Alex
источник

3

img-fluidЯвляется ли ! Спасибо !

— пьяно 05

32

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

— Шаши
источник

Извините, но не могли бы вы уточнить, я не понимаю ваш вопрос, спасибо!

— Shashi

7

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

<div class="col-sm-3">
  <img src="xxx.png" class="img-responsive" style="padding-top: 5px">
</div>

— Wiltonio
источник

1

Решено с помощью Bootstrap, а не пользовательского CSS. Спасибо.

— mattgreen

7

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

<div class="col-sm-3">
  <img src="xxx.png" style="width: auto; height: 195px;">
</div>

— alanHdez
источник

4

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

<div class="row no-gutters">
    <div class="col-10">
        <img class="img-fluid" src="/resources/img1.jpg" alt="">
    </div>
</div>

— Декстер
источник

это не идеальное решение, если у вас есть еще один столбец с текстом в нем, так как он также будет трудно

— Джеймс Берк

2

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

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

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

— Mohsen
источник