Я хочу создать линию изображения с некоторыми конкретными и существенными ограничениями.
Задача: все изображения должны иметь одинаковую высоту.Но мне все равно, какой высоты я получу в конце.Файлы изображений имеют разные соотношения.Изображения должны сохранять свое первоначальное соотношение.Ширина линии - это ширина экрана.Следовательно, эта ширина является переменной в зависимости от устройства пользователя.Я хотел бы, чтобы это работало для IMG;n∊ [2; 6]
Реальная проблема заключается в том, что при небольшой ширине экрана поведение остается прежним!
Я получил отличный результат с помощью flexbox ниже.Но этот код работает только для Firefox.С другими браузерами я не могу наложить на строку ширину экрана и при этом, уменьшение изображений для удержания или изображения теряют соотношение.
Моя попытка может быть замечена на этомfiddle
HTML
<div> <img src="https://www.tlpro.fr/data/img/artspreview/4CroquisTim.jpg"> <img src="https://www.tlpro.fr/data/img/artspreview/4SerresJardinDesPlantes01.jpg"> <img src="https://www.tlpro.fr/data/img/artspreview/5Dessin6FranchissementRail2.jpg"> <img src="https://www.tlpro.fr/data/img/artspreview/6bergersbiny08.jpg"> <img src="https://www.tlpro.fr/data/img/artspreview/4house2.jpg"> </div>
CSS
body{padding:0px;margin:0px;background-color:#4c3b25;} div{ margin-top: 8px; border-top: #f9992a solid 5px; border-bottom: #f9992a solid 5px; width: 100%; display: flex; align-items: center; justify-content: space-around; max-height: 400px; } div>img{ max-height: 400px; margin: 0px 10px; padding: 15px 0px; }
Ожидаемый результат можно увидеть здесь (img): https://ask.tlpro.fr/stackoverflow/001/st001.jpg
Единственное решение, которое я смог найти, - это установить разную ширину для каждого изображения, потому что размеры разные.При таком подходе у вас есть отзывчивость.Вот результат:
body { padding:0px; margin:0px; background-color:#4c3b25; } div { margin-top:8px; border-top:#f9992a solid 5px; border-bottom:#f9992a solid 5px; width:100%; display:flex; align-items:center; justify-content:space-between; padding: 0 15px; } div > img { max-height:100%; padding:15px 0px; display: block; } div > img:nth-child(1) { width: 16%; } div > img:nth-child(2) { width: 21%; } div > img:nth-child(3) { width: 32%; } div > img:nth-child(4) { width: 14.3%; } div > img:nth-child(5) { width: 14.4%; }
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div> <img src="https://www.tlpro.fr/data/img/artspreview/4CroquisTim.jpg"> <img src="https://www.tlpro.fr/data/img/artspreview/4SerresJardinDesPlantes01.jpg"> <img src="https://www.tlpro.fr/data/img/artspreview/5Dessin6FranchissementRail2.jpg"> <img src="https://www.tlpro.fr/data/img/artspreview/6bergersbiny08.jpg"> <img src="https://www.tlpro.fr/data/img/artspreview/4house2.jpg"> </div> </body> </html>
Это то, что я придумал.Похоже, у меня работает с Chrome:
body { padding: 0px; margin: 0px; background-color: #4c3b25; } .container { margin-top: 8px; border-top: #f9992a solid 5px; border-bottom: #f9992a solid 5px; width: 100%; display: flex; justify-content: space-around; } .item { margin: 15px 3px; } .item img { max-height: 100px; max-width: 100%; }
<div class="container"> <div class="item"> <img src="https://www.tlpro.fr/data/img/artspreview/4CroquisTim.jpg"> </div> <div class="item"> <img src="https://www.tlpro.fr/data/img/artspreview/4SerresJardinDesPlantes01.jpg"> </div> <div class="item"> <img src="https://www.tlpro.fr/data/img/artspreview/5Dessin6FranchissementRail2.jpg"> </div> <div class="item"> <img src="https://www.tlpro.fr/data/img/artspreview/6bergersbiny08.jpg"> </div> <div class="item"> <img src="https://www.tlpro.fr/data/img/artspreview/4house2.jpg"></div> </div>
Высота контейнера контролируется высотой изображений, а не наоборот, как у вас.Затем я установил ширину каждого изображения на 100%, что заставляет его уменьшаться, когда у вас заканчивается горизонтальное пространство.
Я также добавил немного горизонтального поля к элементам, чтобы убедиться, что всегда естьнебольшое разделение между ними при уменьшении изображений.
В вашем CSS, попробуйте добавить width:auto в ваш div>img селектор
width:auto
div>img