从 css 中的任意比例提取风景图像

Question

任何人都可以告诉如何从 css 中“提取”风景图像，无论该图像之前的比例是多少？图像不应该被缩放，而是被裁剪。 “新图像”应该包含输入图像的中心。

CSS:

.doesNotWork{
    width:50%;
    height:50%;
    border: 1px solid rgb(34, 23, 187);
  /* in my opinion this div should be a square too and display the same content as the other one but a bit bigger to be 50% of the width of the screen*/
}

.worksAsExpected{
    width:250px;
    height:250px;
    border: 1px solid rgb(34, 23, 187);
}


.cover {
    width:100%;
    height:100%;
    border: 1px solid rgb(187, 23, 23);
    object-fit: cover;
}

HTML:

<div class="doesNotWork">
    <img src="https://www.w3schools.com/w3images/woods.jpg" alt="test" class="cover"/>
</div>
<div class="worksAsExpected">
    <img src="https://www.w3schools.com/w3images/woods.jpg" alt="test" class="cover"/>
</div>

我制作了一个完全显示问题的代码笔。希望有人可以帮助我：

https://codepen.io/su-koch/pen/JjrMqYd

Answer 1

给定代码中的第一个元素有 50% 的宽度。这将是 parent 元素的 50%，在本例中 body 已采用视口宽度。

同样的想法也适用于身高。它是 parent 高度的 50%。与宽度无关。

如果你想将两者链接起来，你可以在现代浏览器上使用 aspect-ratio。像现在一样设置宽度 50%，并设置 aspect-ratio: 1 / 1;

这会给你一个正方形。

从 css 中的任意比例提取风景图像

extract landscape image from any ratio in css

html

css

image

clip

clip-path