Налаштування та розмір зображення відповідно до div (bootstrap)

97

Я намагаюся отримати зображення, яке відповідає певному розміру 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

— посмішка24
джерело

Я відправив відповідь на аналогічне питання тут: 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

Так, це те, що я шукаю! Дуже дякую!

— smilefreak24

ДРУГА відповідь - найкраща, просто додавання class = "img-responsive" до тегу img робить трюк!

— iMobaio

1

краще від width:100%;є max-width:100%;і краще всі вони є класом img-responsiveв BS3 або img-fluidв BS4.

— Nabi KAZ

167

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

<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

Класно! клас = "img-respovable" допоміг. Можливо, це має бути прийнятою відповіддю сьогодні.

— Анупам

1

class = "img-responsive" - це визначений шлях! Це має бути прийнятою відповіддю.

— iMobaio

28

це img-fluidзараз, а неimg-responsive

— речі,

50

Просто новина, яку зараз використовує Bootstrap 4, img-fluidзамість цьогоimg-responsive , тому перевірте, яку версію ви використовуєте, якщо у вас проблеми.

— Олексій
джерело

3

img-fluidробить це ! Дякую !

— піаніно

32

Просто додайте клас img-responsiveдо свого imgтегу, він застосовується в bootstrap 3 і далі!

— Шаші
джерело

Вибачте, але будь ласка, будьте конкретні, я не правильно розумію ваше питання, дякую!

— Шаші

7

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

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

— Вільтоніо
джерело

1

Вирішено З завантажувальним, а не спеціальним 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>

— Dexter
джерело

це не ідеальне рішення, якщо у вас є інший стовпець із текстом, оскільки він також буде жорстким до краю кордону

— Джеймс Берк,

2

Здебільшого проект bootstrap використовує jQuery, тому ви можете використовувати jQuery.

Просто отримати ширину і висоту батька з JQuery.offsetHeight()і JQuery.offsetWidth(), і встановити їх на дочірній елемент з JQuery.width()і JQuery.height().

Якщо ви хочете зробити його чуйним, також повторіть наведені вище кроки в $(window).resize(func).

— Мохсен
джерело