如何停止Edge(浏览器)拉伸我的图像？
如何停止Edge(浏览器)拉伸我的图像？
提问于 2020-03-26 18:53:48
我有一个像这样的图片标签
.flexD {
display: flex;
margin: 0 auto;
width: 90%;
}
.flexP {
display: flex;
}
.imgInP {
margin: auto 0;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
</head>
<body>
<div class="flexD">
<picture class="flexP">
<!-- I do have some source tags-->
<img src="http://placehold.it/100x80"> </picture>
<p> content content content content content content content content content content content content content content content content content content</p>
</div>
<!-- I am using this code-->
<div class="flexD">
<picture class="flexP">
<!-- I do have some source tags-->
<img class = "imgInP" src="http://placehold.it/100x80"> </picture>
<p> content content content content content content content content content content content content content content content content content content</p>
</div>
</body>
</html>
在Chrome上，代码看起来像下面的图片，但在Edge上，我的图片被拉伸了，就像上面的一样。这是否意味着我的边距:自动0；在Edge上不起作用？我该如何解决这个问题呢？
回答 2
Stack Overflow用户
发布于 2020-03-26 19:45:29
如果我对您的需求的理解是正确的，请查看以下内容：
如果您认为image正在被拉伸，那么您可以使用与content:url相同的图像，并指定height和width，以便它在不同的浏览器中保持一致。
.flexD {
display: flex;
margin: 0 auto;
width: 90%;
}
.flexP {
display: flex;
}
.imgInP {
content: url(http://placekitten.com/301/301);
width: 100px;
height: 80px;
}<body>
<div class="flexD">
<picture class="flexP">
<!-- I do have some source tags-->
<img class="imgInP">
</picture>
<p> content content content content content content content content content content content content content content content content content content</p>
</div>
<!-- I am using this code-->
<div class="flexD">
<picture class="flexP">
<!-- I do have some source tags-->
<img class="imgInP"> </picture>
<p> content content content content content content content content content content content content content content content content content content</p>
</div>
</body>
Stack Overflow用户
发布于 2020-03-26 20:13:53
你可以使用css的object-fit属性，它可以阻止图像被拉伸。
.imgInP{
object-fit: cover;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60865614
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号