响应网站;保持图像高度，同时减小宽度？

Posted 2021-04-07

这是我正在研究的网站：http://www.cmattayers.com/moushegianlaw/

我试图让主图像滑块（木槌的照片）响应，但要保持相同的高度。现在我有它，所以图像的尺寸被压扁，使用：

#headerslider img{
    height:227px;
    width:100%;
}

但是，我希望保持图像的完整性，并让它向左滑动（在视图之外，好像它在“框架”中），因为浏览器窗口尺寸变窄了。我不知道如何做到这一点，或者甚至可能做到这一点。纯CSS解决方案是否可行？

答案

您可以在#headerslider上使用背景图像，如下所示，并删除图像标记。

#headerslider {
    background: url('http://www.cmattayers.com/moushegianlaw/wp-content/uploads/2015/06/gavel-header_wide.jpg') no-repeat center right;
    height: 227px;
}

你可能遇到的唯一问题是你的标注框没有设置在同一高度，它恰好恰好适合当下但是如果那个文字缩小了，那么标注框的高度就不会那么高了。您可以将#callout的高度设置为227px，同时保证安全。