Question

我的页面上有一张图片，它是使用photoshop创建的。图像中间有文字。当我最小化窗口时，图像会缩小并且文本会变小而不是缩放。

我尝试过：

.img{
  width: 100%;
  height: 100%;
}

当我最小化窗口时，如何使文本保持不变并且从侧面剪切图像？

谢谢

Answer 1

img元素旨在显示整个图像。要仅显示图像的一部分，最好使用在CSS中指定背景的块元素。这使您可以分别指定视口的大小和图像的位置。

例如，在html中，

<div class='my-image'></div>

在CSS中，

.my-image {
   background-image: url(path-to-image.jpg);
   background-position: center center;
   background-size: auto auto; // This is the default
}

这使您可以将图像放置在div的中心。不管div的大小如何，图像大小都将保持不变（因此，由于裁切，只能看到中心部分）。

有关CSS背景的更多详细信息，请阅读https://developer.mozilla.org/en-US/docs/Web/CSS/background

最小化窗口时，如何控制应显示图像的哪些部分？

1 个答案: