Можно ли соблюдать соотношение сторон адаптивного изображения с начальной шириной и высотой?
Допустим, у меня есть HTML-изображение с предопределенными, жестко закодированными и неизменяемыми значениями ширины и высоты:
<img src = "img.png" style = "width: 800px; height: 600px" />
И правило CSS, позволяющее сделать все изображения адаптивными:
img {
max-width: 100%
}
Проблема в том, что при изменении размера страницы соотношение сторон изображения не сохраняется.
Можно ли сохранить соотношение сторон, учитывая, что:
- Я не могу изменить встроенный стиль изображения
- Но я могу изменить глобальный CSS
Примечание. Решение должно быть общим, поскольку width: 800px; height: 600px — это всего лишь образец, а соотношение может быть любым.
img {height: auto!important} ?
@TemaniAfif использование !important почти во всех случаях неверно.
Вы можете попробовать с object-fit
@t.niese !important — это функция CSS, которую можно использовать при необходимости. Предполагать, что все случаи использования !important неверны, на самом деле неверно.
@TemaniAfif В любом случае я не говорил, что это неправильно. Я сказал, что в большинстве случаев. Я бы, по крайней мере, упомянул, что область действия селектора должна быть как можно более конкретной, если ее действительно невозможно обойти.
И вы совершенно не можете контролировать созданный HTML?
@t.niese он использует встроенные стили, поэтому только important может быть более конкретным, чем встроенные стили.
@TemaniAfif Конечно, но при использовании!important я бы ограничил селектор не просто img, но в идеале нацеливался только на те img элементы, которые должны иметь такое поведение.
@t.niese Я не имею никакого контроля над созданным HTML и могу полагаться только на собственный CSS.
Можете ли вы дать больше контекста HTML? что находится вокруг изображения и имеет ли оно ширину?
Ответы 3
Попробуйте использовать соотношение сторон . Учитывая ваш размер 800 x 600 пикселей, это соотношение 4/3, поэтому вы должны использовать:
img {
width: 100%;
max-width: 100%;
height: auto;
aspect-ratio: 4 / 3;
}
Вам нужно, чтобы ширина и высота были относительными к одной и той же фигуре. Например:
img {
max-width: 100%;
width: 100vw !important;/*Define the size according to the ratio of the image*/
height: 120vw !important;
}<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src = "https://pickture.co.il/wp-content/uploads/2023/05/%D7%A8%D7%A7%D7%A2-%D7%99%D7%A4%D7%94-%D7%9C%D7%94%D7%95%D7%A8%D7%93%D7%94-%D7%97%D7%99%D7%A0%D7%9D-32-768x768.jpg">
</body>
</html>В этом примере ширина и высота будут зависеть от ширины страницы. (важно переопределить высоту и ширину, определенные в html)
Если встроенные стили на самом деле представляют собой внутреннюю ширину и высоту изображения, все, что вам нужно сделать, это сбросить высоту до auto. Вы можете оставить ширину такой, какая она есть, так как у вас есть max-width.
img {
max-width: 100%;
height: auto!important
}<img src = "https://picsum.photos/id/1/800/600" style = "width: 800px; height: 600px" >К сожалению, ширина и высота могут быть любыми, даже с неправильным соотношением сторон для этого изображения.
@jonjbar, что делает это решение еще лучше, потому что оно вернет изображение к «правильному» соотношению сторон.
Я обычно не ставлю
height. Вместо этого попробуйте самый простой способ с «соотношением сторон».