在CSS中缩放横幅

Question

我想放大横幅，但我想保持图像质量，您认为有可能吗？

此人必须占用更多空间... 这是一个例子。

.mybanner{
  height: 500px;
  width: 100%;
  position: absolute;
  
}

    
<img class="mybanner" src="https://zupimages.net/up/19/13/60rt.jpg" alt="banner">

Answer 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>的{​​{1}}，在此您可以分别控制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>