我正在最新版本的Safari for Windows 7中测试此问题。
问题是这个代码适用于所有其他浏览器但是徒步旅行:
<style type="text/css">
.userImg { height: 100%; width: 100%; }
.imgContainer { height: auto; width: 150px; }
</style>
<div class="imgContainer">
<img id="img" class="userImg" src="TemplateFiles/Hydrangeas.jpg" alt="" />
</div>
有没有人知道使用CSS在Safari中按比例调整图像尺寸的技巧?
谢谢!
答案 0 :(得分:59)
对于需要使用高度自动设置并且图像的父级设置为显示“ flex”的人,此技巧将有所帮助。
image { align-self: flex-start; }
如果您的图像的父对象设置了“弯曲方向:列” ,则需要执行此操作。
image { justify-self: flex-start; }
答案 1 :(得分:6)
只需在图像上设置宽度即可。浏览器将按比例自动缩放图像。
.userImg { width: 100%; }
.imgContainer { height: auto; width: 150px; }
答案 2 :(得分:2)
对于需要使用 height auto 的人,您也可以尝试以下操作:
.userImg{
object-fit: contain;
}
答案 3 :(得分:2)
试试这个: 父级有 display:flex 孩子有 align-self:center
@import url('https://fonts.googleapis.com/css?family=Slabo+27px');
body {
font-family: "Slabo 27px", serif;
}
h2 {
text-align: center;
}
[data-flex] {
display: flex;
width: 80%;
max-width: 800px;
font-size: 1.2rem;
margin: 0 auto;
line-height: 1.5;
}
[data-flex] > img {
margin-right: 2rem;
width: 30%;
}
[data-center] {
align-items: center;
}
[data-flex] div, [data-flex] p {
flex: 1;
}
[data-flex] div {
margin-right: 2rem;
}
[data-flex] div img {
width: 100%;
}
<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<h2>By default, images that are flex-children will be their <em>natural</em> height, regardless of their width:</h2>
<div data-flex>
<img src="sophie.jpg" alt>
</div>
<h2>This can be avoided by <em>not</em> specifying a width for the image, but that makes it non-responsive:</h2>
<div data-flex>
<img src="sophie.jpg" alt style="width: auto">
</div>
<h2>Solution 1: apply <code>align-self: center</code> to the image</h2>
<div data-flex>
<img src="sophie.jpg" alt style="align-self: center">
</div>
<h2>Solution 2: apply <code>align-items: center</code> to the flex container</h2>
<div data-flex data-center>
<img src="sophie.jpg" alt>
</div>
<h2>Solution 3: Place the image inside another container, and make <em>that</em> the flex-child</h2>
<div data-flex data-center>
<div>
<img src="sophie.jpg" alt>
</div>
</div>
答案 4 :(得分:0)
.userImg { width: 100%; height: auto; }
.imgContainer { width: 150px; }
2019年。 检查父元素也许
.imgContainer { display: flex; align-items: stretch}