Увеличить баннер в CSS
Я хотел бы увеличить свой баннер, но я хочу сохранить качество изображения, как вы думаете, это возможно?
Человек должен занимать больше места...
Вот пример....
.mybanner{
height: 500px;
width: 100%;
position: absolute;
}
<img class = "mybanner" src = "https://zupimages.net/up/19/13/60rt.jpg" alt = "banner">Возможный дубликат Масштабировать изображение, чтобы оно соответствовало ограничивающей рамке
Вы увеличиваете растровое изображение. Как вы ожидаете, что не будет потери качества?
Ответы 1
Если цель сохранить качество пикселей, то комментарий к вопросу правильный.
У меня такое ощущение, что вы действительно хотите сохранить соотношение сторон изображения, поскольку в настоящее время оно выглядит немного сплющенным. Что происходит в этом случае, так это то, что вы дали элементу img фиксированные height и width, которые не соответствуют естественному соотношению сторон изображения, и это в конечном итоге сжимает содержимое, чтобы оно соответствовало размерам, которые вы запрашиваете.
Здесь я изменил width на auto, что позволило браузеру вычислить это значение в соответствии с естественным соотношением изображения.
.mybanner{
height: 500px;
width: auto;
position: absolute;
}<img class = "mybanner" src = "https://zupimages.net/up/19/13/60rt.jpg" alt = "banner">Если вы действительно хотите «увеличить» изображение, возможно, лучше использовать изображение как background-image из <div>, где вы можете контролировать точные размеры div и изображения отдельно:
.mybanner{
height: 500px;
width: 100%;
position: absolute;
background-image: url('https://zupimages.net/up/19/13/60rt.jpg');
background-repeat: no-repeat;
background-size: 300% auto;
background-position: center center;
}<div class = "mybanner" role = "img"></div>
Несмотря на то, что могут показывать фильмы, масштабирование изображения нет позволяет сохранить тот же уровень качества. Если вы увеличиваете изображение, оно становится буду пиксельным.