отзывчивые изображения различной ширины с постоянной высотой

Я вылил более ранние ответы, но не могу найти точный ответ.отзывчивые изображения различной ширины с постоянной высотой

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

У меня есть jsfiddle, но не могу понять: https://jsfiddle.net/s8p4wv8m/

max-width: 100%; 
height: auto;

Есть ли что-то с высоты мне не хватает?

Я могу получить чувствительную часть, но я хочу сделать высоту всех изображений согласованными, не затрагивая пропорции по мере изменения размера браузера.

Изображения не обязательно будут на системной сетке - они будут иметь разную ширину.

Большое спасибо.

источник

2016-12-21 user3808123

В вашей скрипке высота изображений согласована между собой. Я что-то упускаю? – Nimrod

Добавить «max-height: 62px;» к изображениям, ограничивающим все изображения высотой самого короткого изображения, поэтому в примере вашего скрипта ... есть «62px». – vicgoyso

Это более близкая версия https://jsfiddle.net/5h54f2co/4/. Прямо сейчас, изображения реагируют, когда окно браузера уменьшается по размеру, они поддерживают соотношение сторон, но они уменьшаются с разной скоростью, и я не могу получить право на право работать. В идеале, все они будут уменьшаться в размере с одинаковой скоростью, сохраняя их пропорции и сохраняя постоянную высоту. – user3808123

Вы можете добавить "max-height: 62px;" ко всем вашим imgs, ограничивающим все изображения до высоты самого короткого изображения, следовательно, в вашем примере скрипта ... «62px»

источник

2016-12-21 18:56:20 vicgoyso

Спасибо - один вопрос - когда я обновил скрипку - они привязаны к одной и той же высоте, но когда я уменьшаю масштаб, более узкие изображения начинают уменьшаться, чем горизонтальное изображение, - есть ли способ исправить что? – user3808123

Это вы, что ищете?

Изображения изменятся с помощью окна.

Также: изображения на вашей скрипке всегда будут иметь проблемы с сопоставлением высоты, некоторые из них являются портретами, а некоторые - ландшафтными), если только вы не в порядке с их обрезанием.

.row { 
 
    width: 100%; 
 
} 
 

 
.fluid-width-fixed-space img { 
 
    margin: 2% auto; 
 
    display: block; 
 
    height: auto; 
 
    border: 1px solid #000; 
 
    max-width: 100% 
 
}

<div class="row"> 
 
    <div class="fluid-width-fixed-space col-xs-12 col-sm-8 col-md-10 col-lg-12"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/550x150"> 
 
    <img src="http://placehold.it/150x250"> 
 
    <img src="http://placehold.it/340x115"> 
 
    <img src="http://placehold.it/800x550"> 
 
</div>

источник

2016-12-21 19:05:11

это даст все изображения, ширину 100% и высоту шкалы, но если высота изображения превышает значение урожая максимальной высоты не будет показано.

<div class="crop"> 
    <img src="http://placehold.it/350x150"> 
</div> <div class="crop"> 
    <img src="http://placehold.it/350x150"> 
</div> 


.crop{ 
    position: relative; 
    overflow: hidden; 
    max-height: 200px; 
    display: block; 
    overflow: hidden; 
} 

.crop img{ 
    width:100% 
}

источник

2016-12-22 13:56:51

отзывчивые изображения различной ширины с постоянной высотой

ответ

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