css < img>和背景图像大小不同

b5buobof 于 2023-11-19 发布在其他

关注(0)|答案(2)|浏览(121)

为什么当我将<img>的宽度和高度都设置为400 px时，图像完全是正方形的，但是当我使用<div>然后将background-image应用于它并在那里设置相同的大小时，图像是不成比例的，并且只有当我设置width: 1600px和height: 400px时，它才变成正方形？
如何正确设置background-image的大小，使其成为正方形，就像<img>一样？
我把这个添加到背景图片中，但它不起作用：

background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 400px;
height: 400px;

字符串
这是我的小提琴：https://jsfiddle.net/vwe6hsn9/6/（尝试注解掉宽度和高度，图像消失）。
我还想有一个background-color的情况下，图像不会加载的用户，使他们知道这里应该是一个图片。但它也不可见，如果你删除的图像。

css

来源：https://stackoverflow.com/questions/77469778/img-and-background-image-size-is-different

2条答案

按热度按时间

ssm49v7z1#

1.当我们设置background-size: cover;时，它指示浏览器缩放背景图像，同时保持其宽高比以覆盖整个容器。这可能导致图像无法以原始尺寸显示，从而导致失真。
1.正如@Brett Donald提到的，我们不能只使用background-size: 400px 400px;而不添加width和height，因为
当你删除div的width和height时，它会消失，因为它是空的;它不包含任何东西;它会缩小到零width和零height的大小
1.此外，如果你有任何元素（例如text）旁边的元素包含一个background-image，我建议使用flex-shrink: 0;，因为这是一种方法，以防止background-image收缩时，其容器小于background-image的大小。
所以，如果我们希望background-image是400x400，我们可以做下一个：

background-position: center;
background-repeat: no-repeat;
background-size: cover;  // or background-size: 100% 100%, depending on what you need.
width: 400px;
height: 400px;

字符串

赞(0）回复(0）举报 2023-11-19

rekjcdws2#

尝试将这些值赋予 img 样式，使其填充整个屏幕：

background-size: 400% 400%;
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;

字符串
请注意，如果您想使用背景图像，请尝试以下操作：

background-image: url('your-path');
background-size: 400% 400%;
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;

型

赞(0）回复(0）举报 2023-11-19

我来回答

css < img>和背景图像大小不同

2条答案

相关问题

热门标签

最新问答