Изображение сжимается при изменении высоты браузера, но не при изменении ширины
Я пытаюсь сделать так, чтобы высота ограничивалась высотой устройства, на котором просматривается изображение, чтобы вы могли просматривать все изображение без прокрутки вниз.
Для этого я использовал:
.specific-image {
display: block;
max-height: 92vh;
max-width: 1240px;
}
Итак, если изображение 500x1000 пикселей, оно будет занимать высоту 92vh, а если оно 1000x500, оно будет иметь ширину 1240 пикселей и высоту (наиболее вероятно) меньше 92vh.
Проблема в том, что если я изменяю высоту браузера, изображение уменьшается, однако, если я масштабирую ширину, мой браузер отрезает часть изображения, и мне придется прокручивать по горизонтали, чтобы увидеть полное изображение.
Не знаю, как получить лучшее из обоих миров.
https://codepen.io/BozhidarSK/pen/NBKyyW
.specific-image-flex-container {
display: flex;
}
.specific-image-column {
flex: 4;
}
.specific-image-container-element {
text-align: center;
position: relative;
display: inline-block;
width: 100%;
}
.specific-image {
display: block;
max-height: 92vh;
max-width: 1240px;
}
.stickySpecificContainer {
position: relative;
z-index: 2;
display: inline-block;
}<div class = "specific-image-flex-container">
<div class = "specific-image-column">
<div class='specific-image-container-element'>
<div class = "stickySpecificContainer">
<img class='specific-image' src='https://i.redd.it/1v3x2pxkjy611.png' alt='Random image' />
</div>
</div>
</div>
</div>Но это просто делает изображение шириной 40% от родительского элемента? Это ничего не решает.
Вы хотите сказать, что хотите, чтобы изображение было не выше высоты браузера И не шире ширины браузера?
@Bobimaru см. Исправленный ответ.
Ответы 3
дать max-width: 100% изображению вместо значения в пикселях, процентное значение гарантирует, что максимальная ширина изображения составляет 100% документа.
.specific-image {
display: block;
max-height: 92vh;
max-width: 100%
}
.specific-image-flex-container {
display: flex;
}
.specific-image-column {
flex: 4;
}
.specific-image-container-element {
text-align: center;
position: relative;
display: inline-block;
width: 100%;
}
.specific-image {
display: block;
max-height: 92vh;
max-width: 100%;
}
.stickySpecificContainer {
position: relative;
z-index: 2;
display: inline-block;
}<div class = "specific-image-flex-container">
<div class = "specific-image-column">
<div class='specific-image-container-element'>
<div class = "stickySpecificContainer">
<img class='specific-image' src='https://i.redd.it/1v3x2pxkjy611.png' alt='Random image' />
</div>
</div>
</div>
</div>Это устранило мою проблему с масштабированием, однако, таким образом, мое изображение может иметь ширину более 1240 пикселей? Есть ли способ сохранить отзывчивость с помощью% и по-прежнему ограничить максимальную ширину до 1240 пикселей?
Привет, Бобимару, ширина изображения не будет превышать исходную ширину, если вы не укажете это таким образом, поэтому использование 100% - лучший способ убедиться, что изображение останется отзывчивым.
Вы можете попробовать width: 100%; максимальная ширина: 1240 пикселей;
Хммм, после добавления ширины: 100%; max-width: 1240px, изображение растягивается непропорционально, если я изменяю высоту браузера.
@wiiiiilllllll, это не сработает, ширина 100% растянет изображение
Возможно ли вообще выполнить то, о чем я прошу? Может, я просто выберу одну из других вариаций.
привет Бобимару, какие еще решения вы ищете, этот ответ вам не подошел?
если вы не уверены в этом, загляните сюда: stackoverflow.com/questions/3029422/…
Это работает, если я хочу иметь максимальную ширину 100%, однако мне нужно иметь максимальную ширину 1240 пикселей, сохраняя при этом отзывчивость. Очевидно, ваш ответ лучше того, что я хочу, и если я не найду решение своей проблемы, я воспользуюсь им.
Позвольте нам продолжить обсуждение в чате.
Извините за задержку, возникла неожиданная работа. Вы все еще готовы поболтать?
92vh составляет 92% высоты обзора. vw используется для ширины обзора.
.specific-image {
display: block;
max-height: 92vh;
max-width: 92vw;
}
Вы хотите, чтобы изображение было максимальной шириной 100% по умолчанию и 1240 пикселей, если экран шире 1240 пикселей. Добиться желаемого результата можно с помощью медиа-запросов:
body {
margin: 0;
}
.specific-image {
display: block;
max-height: 92vh;
max-width: 100%;
}
@media screen and (min-width: 1240px) {
.specific-image {
max-width: 1240px;
}
}<img class = "specific-image" src = "https://dummyimage.com/1600x600/000/fff">Та же демонстрация с квадратным изображением:
body {
margin: 0;
}
.specific-image {
display: block;
max-height: 92vh;
max-width: 100%;
}
@media screen and (min-width: 1240px) {
.specific-image {
max-width: 1240px;
}
}<img class = "specific-image" src = "https://dummyimage.com/600x600/000/fff">
добавить
width:40%;или аналогичный класс конкретного изображения.