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

Posted 2023-03-06

【中文标题】响应式网站；在减小宽度的同时保持图像高度？

【英文标题】：Responsive site; maintaining image height while decreasing width?

【发布时间】：2015-08-21 17:21:10

【问题描述】：

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

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

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

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

【问题讨论】：

是 headerslider 滑块的容器。定义 headerslider 溢出属性是否适合您的需要？

【参考方案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。