inuit.css调整窗口大小时图像高度不均匀



调整浏览器大小时,我的图像出现问题。

布局是第一行中的一个英雄图像,第二行中的3个图像都是325px x 310px,这些图像没有调整大小的问题。

在第三行是两张图片660px x 310px和325px x 310px。当我调整浏览器窗口的大小时,图像的高度不会保持相等。较宽的图像在更改为移动布局之前大约高出三个像素。

我希望有人能阐明为什么图像在高度上不保持相等

如果没有小提琴来证实这一点,我想这与inuit.css/bas_images.scss:中定义的响应样式有关

img{
max-width:100%;
}

由于图像的宽度不同,并且默认高度为auto,因此图像的显示高度将随着宽度的变化而变化。

我猜你在图像上也有一个最大高度,否则你会看到这些非常不同的纵横比之间在表观高度上有更明显的差异!我打赌,当页面宽度足够缩小时,较短/较宽图像的自然高度将低于您设置的最大高度。

这里的最佳解决方案是提供大小一致的图像,正如@kursus所建议的那样;否则,您可能会考虑在包含的div上添加BG颜色,以便布局看起来正确,即使图像已损坏。

检查http://www.mademyday.de/css-height-equals-width-with-pure-css.html获取有关该主题的优秀提示。

最新更新