我在一个对间距有非常严格要求的网站上工作。其中之一是所有图像之间应该有 30 像素的边距。图片本身可以响应,但边距必须保持不变。
我遇到的问题如下图所示。基本上我有两列并排。其中一个有两个正方形图像,中间有 30 像素的间隙。另一个是单个高图像,其高度等于正方形图像高度的 2 倍 + 30px(考虑两个正方形之间的边距)。
在大屏幕上,当图像为全尺寸时,这会正确显示,但在较小的屏幕上,图像会缩小。因此,包含在高图像尺寸中以匹配正方形之间的边距的 + 30px 减少了。然而,图像之间的边距仍为 30 像素,这会导致底部出现间隙,使图像无法对齐。
人们以前用过什么优雅的解决方案来解决这个问题?我确信这是一个直截了当的问题,但我找到的唯一解决方案是令人费解和困惑的。
在技术方面,我正在使用来自 bootstrap 3 的网格和 Styled Components。
最佳答案
所以我找到了一个相当令人满意的解决方案,无论屏幕尺寸如何,都能使图像完美对齐并保留边距。 但是,此方法的缺点是图像未在包含 <TallImage>
的中心对齐div,意味着图像的真正中心向右移动。
我将保留这个问题,因为我欢迎看到任何人可以提出的任何其他解决方案。但是对于正在寻找的人,我的解决方案如下。
import styled from 'styled-components';
const TallImage = styled.div`
height: 0;
margin: 0 0 30px;
overflow: hidden;
padding-top: calc(200% + 30px);
position: relative;
width: 100%;
img {
height: 100%;
position: absolute;
top: 0;
width: auto;
}
`;
<div className="row">
<div className="col-sm-6">
<SquareImage>
<img src="..." alt="..." />
</SquareImage>
<SquareImage>
<img src="..." alt="..." />
</SquareImage>
</div>
<div className="col-sm-6">
<TallImage>
<img src="..." alt="..." />
</TallImage>
</div>
</div>
关于css - 具有响应大小和固定 px 边距的图像对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50266591/