Question

是否有任何方法（使用CSS）使图像覆盖div元素，但只有在可以在不升级时覆盖原始尺寸的情况下才能完成？

防止像素化图像。对象拟合'cover'升级甚至图像太小。并且'contain'不会推动图像覆盖div。

那么，有没有办法实现我想要的目标？

修改

似乎即使'contain'也是如此糟糕。它将图像放大到父元素的边缘，即使它使图像比原始图像更大。那太疯狂了......不是吗？

我试图看看是否可以通过纵横比至少在Wordpress中添加图像大小，而不是确切的大小。我只是想改变，裁剪到图像的给定比例。这至少可以帮助一点。但不，没有这方面的功能。只需上传后可以使用的图像编辑器......

响应式思维在哪里？宽高比是未来，不是像素？

Answer 1

我做了一些研究，可以为您提供这个解决方案：

图片需要是背景图片
为background-size + auto
（可选）您可以使图像居中美观

在此示例中，.img-container也是灵活的（20vh），如果图像小于100px，则裁剪图像。固定的background-size值可防止图像放大。

创建了jsFiddle以检查灵活容器

.img-container {
  width: 60vh;
  height: 60vh;
  border: 2px solid #111;

  background-repeat: no-repeat;
  background-position: center;
  background-size: 100px auto;

  background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
}

<div class="img-container"></div>

如何升级图像以覆盖div而不是图像原始尺寸？

1 个答案: