Блог

Главная - Вопросы по программированию - Уменьшите изображение до высоты гибкого ряда, не растягивая ширину изображения

Уменьшите изображение до высоты гибкого ряда, не растягивая ширину изображения

#css #flexbox

Вопрос:

У меня есть изображение, содержащееся в строке Flex. Высота изображения уменьшается, чтобы соответствовать высоте строки, но ширина изображения не уменьшается. Как уменьшить ширину изображения пропорционально высоте изображения, которая равна высоте строки?

 <div id="app-banner-container">
    <img src="https://via.placeholder.com/150"/>
    <img src="https://via.placeholder.com/150"/>
</div>
 
 #app-banner-container {
    display: flex;
    flex-direction: row;
    max-height: 75px;
}

img {
  margin-right: 5px;
}

JSFiddle: https://jsfiddle.net/9jhvrbwf/15/

Комментарии:

1. Я не уверен, что полностью понял ваш вопрос: вы хотите, чтобы оба изображения одинаково растягивались в пределах вашего родительского div и заполняли оставшееся пространство?

2. @Dvalo, высота изображения изменяется в соответствии с высотой строки, но ширина изображения остается прежней. Я бы хотел, чтобы ширина также изменялась, а не растягивалась изображение.

Ответ №1:

Вы можете переместить максимальную высоту: 75 пикселей; из div в img

 #app-banner-container {
    display: flex;
    flex-direction: row;
}

img {
  margin-right: 5px;
  max-height: 75px;
} 
 <div id="app-banner-container">
    <img src="https://via.placeholder.com/250x150"/>
    <img src="https://via.placeholder.com/150"/>
</div>

Комментарии:

1. Фиксированная высота строки 75 пикселей-это просто простой пример. Я бы хотел, чтобы размер изображения менялся при изменении размера строки, поэтому установка фиксированных размеров в img не будет работать.

Метки: ,