我正在尝试使用flexbox在我的内容流中并排放置两个图像。在Chrome / Safari中,它可以正确缩放图像,但在Firefox / IE中,宽高比不受影响,图像失真。内容流的总宽度取决于浏览器的宽度。当窗口变窄时,图像需要重新调整。
这就是它在Chrome / Safari(WebKit)中的外观:
Aspect ratio respected http://pluto.justdied.com/w2box/data/chrome.PNG
虽然这是它在Firefox / Internet Explorer中的外观:
image stretches http://pluto.justdied.com/w2box/data/exhibit.PNG
这个2列视图有很长的图像。
HTML标记:
<div class="grid">
<img src="../images/mille_bornes_02.jpg">
<img src="../images/mille_bornes_08.jpg">
</div>
CSS如下:
.grid {
z-index: 1;
margin: 0px 0px 16.5px;
position: relative;
flex-direction: row;
width: 100%;
height: 100%;
display: flex;
padding: 0;
border: 0;
}
.grid img {
position: relative;
display: block;
margin-left: 16.5px;
height: 100%;
width: 100%;
}
.grid > img:first-child {
margin-left: 0px;
}
我试图调整大小,但我仍然在Firefox / IE中出现某种形式的失真。有关如何修复它的任何想法?我希望使用flexbox来避免使用JavaScript来强制它。
两个源图像共享相同的高度和宽度。
非常感谢所有反馈和帮助!
谢谢!
答案 0 :(得分:5)
我还没有仔细研究过你的具体情况,但是在尝试解决类似的问题时我遇到了一个问题,其中Flex容器内的图像在Firefox上有偏差。
我的解决方案是将object-fit: contain
添加到图像中并修正FF中的宽高比。
如果有帮助的话,迟到总比没有好!
答案 1 :(得分:5)
将img包装在块级元素中。 (我刚才有同样的问题)
<div class="grid">
<div><img src="../images/mille_bornes_02.jpg"></div>
<div><img src="../images/mille_bornes_08.jpg"></div>
</div>
并且您的css应该定位<div>
而不是<img />
答案 2 :(得分:0)
无法找到一个好的跨浏览器支持的CSS解决方案我已经制作了以下JavaScript函数,可以在页面加载时以及窗口/浏览器调整大小时触发:
function adjustGrids() {
var margin = 16.5;
var grid = document.getElementsByClassName('grid');
var gridWidth = grid[0].offsetWidth;
for (var i = 0; i < grid.length; i++) {
var images = grid[i].getElementsByTagName('img');
for (var y = 0; y < images.length; y++) {
images[y].style.width = ((gridWidth - margin) / 2) + 'px';
}
}
}
此解决方案尊重图像之间的固定边距,并循环浏览页面上所有类似的“网格”。
如果有人有更好的解决方案,我会全力以赴!