#html #css
#HTML #css
Вопрос:
Мне нужно изображение, которое сохранит свое соотношение сторон, будет максимальной шириной или высотой самого изображения, но не более высоты / ширины окна.
Вот пример codepen: https://codepen.io/anon/pen/GeQqOv
Это примеры пользовательских аватаров, и пользователь может загрузить его любого размера, но я хочу, чтобы большие аватары имели 100% размер изображения и не растягивались на больших экранах из-за маленького.
Теперь проблема в том, что маленькое изображение будет растягиваться.
img {
width: 100%;
height:auto;
object-fit: contain;
max-height: 100vh;
}
Ответ №1:
Если вам не нужно поддерживать старые браузеры, используйте object-fit значение contain , которое увеличивает или уменьшает размер изображения, чтобы заполнить поле, сохраняя его соотношение сторон.
img {
width: 100%;
height:auto;
object-fit: contain;
max-height: 100vh;
}
Комментарии:
1. Спасибо, но маленькое изображение все еще растягивается
2. Лично я бы хотел ввести другие правила оформления для небольших изображений. Я бы не ожидал, что маленькое квадратное изображение будет вести себя так же, как большое альбомное изображение.
3. проблема в том, что это аватар пользователя, и пользователь может загрузить его любого размера, но я хочу, чтобы большие аватары имели 100% размер и не растягивались на больших экранах на маленькие: (
4. Аватар любого размера !!?? Странно. Я бы не хотел этого допускать. Ну что ж. Я полагаю, вы могли бы написать некоторый код для определения размера и применения различных стилей.
Ответ №2:
Это решение, которое не имеет только max-height: 100vh
img {
height:auto;
width:auto;
object-fit: contain;
max-width:100%;
max-height:100%;
object-fit: contain;
}