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

Question

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

Я пытаюсь получить изображение, чтобы соответствовать в пределах определенного размера 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;





}

473 8

html css twitter-bootstrap

8 ответов:

Comments

Ничего не найдено.

jterry · Accepted Answer · 2013-05-09 19:26:39

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

Shafeeque S · Accepted Answer · 2015-05-15 16:13:30

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

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

Alex · Accepted Answer · 2017-04-26 06:22:19

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

Shashi · Accepted Answer · 2018-04-19 18:44:43

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

wiltonio · Accepted Answer · 2015-10-29 05:07:16

У меня была эта же проблема и наткнулся на следующее простое решение. Просто добавьте немного отступов к изображению, и оно изменит свой размер, чтобы поместиться в div.
<div class="col-sm-3">
  <img src="xxx.png" class="img-responsive" style="padding-top: 5px">
</div>

alanHdez · Accepted Answer · 2018-04-19 06:26:26

я использовал это и работает для меня.
<div class="col-sm-3">
  <img src="xxx.png" style="width: auto; height: 195px;">
</div>

Mohsen · Accepted Answer · 2016-07-03 02:27:51

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

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

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

TheHive · Accepted Answer · 2018-09-12 07:17:14

Если кто-то из вас ищет Bootstrap-4. Вот он
<div class="row no-gutters">
    <div class="col-10">
        <img class="img-fluid" src="/resources/img1.jpg" alt="">
    </div>
</div>