当我尝试动态更改图像父级 div 的高度时,宽度在 Chrome 中按比例变化。但是,这种预期行为在 Safari 中不起作用。
HTML:
<div class="content">
<div class="imagee-wrapper">
<img src="http://www.digital-photography-school.com/wp-content/uploads/2010/10/bird-photography-feeders.jpg" />
</div>
<div class="image-wrapper">
<img src="http://www.digital-photography-school.com/wp-content/uploads/2010/10/bird-photography-feeders.jpg" />
</div>
<div class="image-wrapper">
<img src="http://www.digital-photography-school.com/wp-content/uploads/2010/10/bird-photography-feeders.jpg" />
</div>
<div class="image-wrapper">
<img src="http://www.digital-photography-school.com/wp-content/uploads/2010/10/bird-photography-feeders.jpg" />
</div>
</div>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/>
<button id="2">Increase height</button>
CSS:
div {
height: 100px;
float: left;
background: red;
}
img {
max-width: 100%;
max-height: 100%;
}
JS(测试动态增加高度)
$("#2").click(function() {
$("div").css("height", "+=5");
});
这是一个可以玩的 fiddle :
我做错了什么?
最佳答案
对我来说,它是这样工作的:
$("#2").click(function() {
$("div").css("height", "+=5");
});
html,
body {
width: 100%;
height: 100%;
}
.content {
width: 100%;
height: 100px;
background: red;
}
.image-wrapper {
display: inline-block;
}
img {
max-width: 100%;
max-height: 100%;
vertical-align: top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<img src="http://www.digital-photography-school.com/wp-content/uploads/2010/10/bird-photography-feeders.jpg"
/><img src="http://www.digital-photography-school.com/wp-content/uploads/2010/10/bird-photography-feeders.jpg"
/><img src="http://www.digital-photography-school.com/wp-content/uploads/2010/10/bird-photography-feeders.jpg"
/><img src="http://www.digital-photography-school.com/wp-content/uploads/2010/10/bird-photography-feeders.jpg" />
<br />
<button id="2">Increase height</button>
</div>
或在 JSFiddle 中查看:http://jsfiddle.net/6e6zpetd/
关于javascript - 图像宽度在 Safari 中不会按比例变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48722301/