响应式网站；在减小宽度的同时保持图像高度？

Question

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

我正在尝试使主图像滑块（木槌的照片）具有响应性，但要保持相同的高度。现在我有它，所以图像的尺寸被压缩了，通过使用：

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

但是，我想保持图像的完整性，并在浏览器窗口变窄时让它向左滑动（看不见，就像它在“框架”中一样）。我不知道如何做到这一点，或者这是否可能。纯 CSS 解决方案可行吗？

Answer 1

您可以像下面这样在#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。