响应但是作为<img>元素的正方形的图像-Java 学习之路

我正在使用Ionic 1.x和Angular 1.x，我显示的是一个通常是正方形但不总是的头像图像，我希望它是全宽，然后是正方形，所以如果屏幕是720px宽，我想要720px高和宽图像，如果图像大于这个大小，它应该隐藏多余的（理想情况下以智能方式） .

我只包括离子样式和我自己的一些，所以这个项目中不包含bootstrap .

我很乐意应用宽度为100％的类，图像为100％，高度为auto，但高度不应超过宽度 .

如上所述，它需要响应，因为它将在各种屏幕尺寸上显示，所以图像我不会总是知道设置大小...我可以使用一些JS手动计算和设置大小，但是是没有点笨重？

我看了一下指令但却找不到 .

1 回答

0
一种方法是创建一个响应方形元素，然后使用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%; .
- 因为您使用的是 <img> ，所以您可以使用CSS删除它 . 通过使用单个透明像素作为 src 图像来解决此问题 . Base64编码，即 src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" （thanks to Chris Coyier为我们省去了制作我们自己的麻烦）
- 现在将图像添加为内联 background-image . 使用background-position: center居中，并使用background-size: cover进行缩放以适合 <img> . 您可以使用background shorthand在一个CSS属性中使用 background: position/size 来表示 .
这一切都在一起 . 我正在使用一个包装元素，只是为了让事情适合在片段结果窗口中;第二个图像演示成功地将非方形图像转换为正方形 .
```
img {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  background: no-repeat center/cover;
}
#wrapper-for-demo {
  width: 200px;
}
```
```
<div id="wrapper-for-demo">
  
  
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="background-image:url(http://placehold.it/400x400)" />
  
  
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="background-image:url(http://placehold.it/400x600)" />
  
</div>
```
回复于 2024-05-13T16:28:00+08:00

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

1 回答

相关问题