java 图像 截取正方形_响应但是作为<img>元素的正方形的图像

一种方法是创建一个响应方形元素，然后使用CSS背景图像而不是HTML img src ：

您可以使用 height: 0 ， width: x% 和 padding-bottom: y% (或 padding-top )创建任何给定aspect ratio的响应元素，其中 x / y 是宽高比 . (这是因为percentage padding is relative to width) . 在您的情况下，要使用全宽正方形 height: 0; width: 100%; padding-bottom: 100%; .

因为您使用的是 ，所以您可以使用CSS删除它 . 通过使用单个透明像素作为 src 图像来解决此问题 . Base64编码，即 src="https://i-blog.csdnimg.cn/blog_migrate/219a408b9f6c699f2d2f4ffa2f124275.png" (thanks to Chris Coyier为我们省去了制作我们自己的麻烦)

现在将图像添加为内联 background-image . 使用background-position: center居中，并使用background-size: cover进行缩放以适合 . 您可以使用background shorthand在一个CSS属性中使用 background: position/size 来表示 .

这一切都在一起 . 我正在使用一个包装元素，只是为了让事情适合在片段结果窗口中;第二个图像演示成功地将非方形图像转换为正方形 .

img {

width: 100%;

height: 0;

padding-bottom: 100%;

background: no-repeat center/cover;

}

#wrapper-for-demo {

width: 200px;

}