Сделать изображение подходящим в контейнере

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

HTML:

<div class="container"> 
     <div class="row"> 
      <div class="col-md-3 sec5row"> 
       <img class="filter" src="resources/images/f1.jpg" alt="f1"> 
      </div> 
      <div class="col-md-3 sec5row"> 
       <img class="filter" src="resources/images/f2.jpg" alt="f1"> 
      </div> 
      <div class="col-md-3 sec5row"> 
       <img class="filter" src="resources/images/f3.jpg" alt="f1"> 
      </div> 
      <div class="col-md-3 sec5row"> 
       <img class="filter" src="resources/images/f4.jpg" alt="f1"> 
      </div> 
    </div> 
<div>

CSS:

.sec5row { 
     border : 1px solid red; 
     position: relative; 
    } 
    .filter { 
     position: absolute; 
    }

источник

2016-07-12 pexichdu

просто использовать IMG {ширина: 100%} –

IMG {макс-ширина: 100%;} может работать. Или, может быть, даже img {width: 100%;}, если вы хотите его на 100% все время. – RMo

Или возможно даже лучше добавить класс bootstrap img-реагирующий на изображение (при условии, что вы используете bootstrap на основе способа создания столбцов). – RMo

Добавить CSS в код

#img { 
    width: 100px;//change px size 
    height: 100px;//change px size 
    padding-left: 3px; 
    padding-top: 5px; 
}

источник

2016-07-12 07:51:38 Ranjan

why #img ?? Нет идентификатора для img-тега –

сделать простой id = "", чтобы он не повлиял ни на что. – Ranjan

или использовать класс типа ".filter" – Ranjan

Вы можете использовать следующий код, чтобы соответствовать изображение внутри отзывчивым DIV

.filter { 
    width:100%;/*To occupy image full width of the container and also fit inside the container*/ 
    max-width:100%/*To fit inside the container alone with natural size of the image ,Use either of these width or max-width based on your need*/ 
    height:auto; 
    }

источник

2016-07-12 07:52:49 bubesh

Можете ли вы сказать мне, почему высота: авто? извините, я так новичок. – pexichdu

@pexichdu Чтобы сохранить соотношение сторон изображения по ширине, иначе изображение будет выглядеть растянутым, так как мы дали ширину как 100% – bubesh

Я думаю, что класс bootstrap «.img-отзывчивый» решает вашу проблему. Так что попробовать что-то вроде этого:

<div class="container"> 
 
     <div class="row"> 
 
      <div class="col-md-3"> 
 
       <img class="img-responsive" src="resources/images/f1.jpg" alt="f1"> 
 
      </div> 
 
      <div class="col-md-3"> 
 
       <img class="img-responsive" src="resources/images/f2.jpg" alt="f1"> 
 
      </div> 
 
      <div class="col-md-3"> 
 
       <img class="img-responsive" src="resources/images/f3.jpg" alt="f1"> 
 
      </div> 
 
      <div class="col-md-3"> 
 
       <img class="img-responsive" src="resources/images/f4.jpg" alt="f1"> 
 
      </div> 
 
    </div> 
 
<div>

Он устанавливает стиль вашего изображения на "макс-ширина: 100%;" и "height: auto;" который должен быть именно тем, что вам нужно. Не требуется никаких дополнительных css.

источник

2016-07-12 07:55:21 Jabalaja

Просто добавьте класс = "IMG-отзывчивый" к вашему IMG тег ... она работает отлично

источник

2016-07-20 10:49:06

Сделать изображение подходящим в контейнере

ответ

Смежные вопросы