主页 / 问题 / 1016563
Accepted
Родион Поляков
Asked:2020-08-23 16:40:19 +0000 UTC2020-08-23 16:40:19 +0000 UTC

如何从图像 1x1 > 4x3 制作？

  • 772

我在一些网店看到这样的解决方案：为图片添加一个容器，当图片插入容器时，沿容器的整个高度拉伸并居中对齐，宽度被截断容器。结果是 1x1 > 3x4。

我正在使用 CSS 框架布尔玛。默认情况下，我们已经有一个图像容器来保持我们需要的纵横比（3x4）。但是，如果我添加一个 1x1 图像，它只会拉伸以适应容器。如何使图像居中并在边缘裁剪？

<figure class="image is-3by4">
    <img src="https://bulma.io/images/placeholders/480x640.png">
</figure>
css

1 个回答

  1. Best Answer

    选项 #1
    尝试在图像中添加以下规则（93% 的浏览器支持此选项）：

    .image-1{
   object-fit: cover;
   object-position: center;
   width:100%;
   height: 100%;
}

    选项 #2使用+
    代替标签（支持 96.5%+ 浏览器）imgdivbackground-size

    选项 #3
    供父级figure使用overflow: hidden;，用于图像height:100%; transform:translate(-50%, -50%);+ 供应商前缀（-moz、-webkit、-o、-ms）（支持 97.37%+ 浏览器）

    • 1

相关问题