У меня есть код html, например:
<div class="item">
<img src="...">
</div>
И css-код выглядит следующим образом:
img {
max-width: 100%;
height: auto;
}
.item {
width: 120px;
height: 120px;
height: auto;
float: left;
margin: 3px;
padding: 3px;
}
Что я хотел бы сделать, так это сделать img-дисплей, используя ширину div и растянуть его высоту. Я также хочу, чтобы div растягивался, чтобы соответствовать img. Возможно ли это?
что вы ищете min-height и max-height.
img {
max-width: 100%;
height: auto;
}
.item {
width: 120px;
min-height: 120px;
max-height: auto;
float: left;
margin: 3px;
padding: 3px;
}
Попробуйте width:inherit, чтобы изображение взяло ширину контейнера <div>. Он будет растягивать/сжимать его высоту для поддержания пропорции. Не устанавливайте высоту в <div>, размер будет соответствовать высоте изображения.
img {
width:inherit;
}
.item {
border:1px solid pink;
width: 120px;
float: left;
margin: 3px;
padding: 3px;
}
Нет, вы не можете сделать img stretch, чтобы он соответствовал div и одновременно достигнуть обратного. У вас будет бесконечный цикл изменения размера. Тем не менее, вы можете взять несколько заметок из других ответов и реализовать некоторые минимальные и максимальные размеры, но это не вопрос.
Вам нужно решить, будет ли ваше изображение масштабироваться, чтобы соответствовать его родительскому элементу, или если вы хотите, чтобы div расширялся, чтобы соответствовать его дочернему img.
Использование этого блока говорит мне, что вы хотите, чтобы размер изображения был переменным, поэтому родительский div - это ширина, на которую масштабируется изображение. height: auto будет поддерживать соотношение сторон изображения в такте. если вы хотите растянуть высоту, это должно быть 100% подобно этой скрипке.
img {
width: 100%;
height: auto;
}