html - 您如何仅使用 CSS 水平缩放/缩小图像？

Question

您如何使主图像仅像本网站上的图片一样水平缩放/缩小？当您调整浏览器大小时，它不会缩放图像，而是开始剪切图像的侧面。以下是它应该如何工作：http ://castus.co.uk/

castus.co.uk 网站上的主图像保持在相同的高度，无论您调整浏览器的大小多么小，但它会缩小图像的侧面。我希望能更好地解释它:)

当我调整浏览器大小时，我似乎只能缩放整个图像。

我目前正在为我的 img 类使用以下代码：

    img.mail {

    width: 100%;
    height: auto;

    }

Answer 1

或者你的意思是这个？

    background-position: center;
    background-image: url('....');
    background-repeat: none;

    width: 100%;
    height: 100px;

它削减而不是像您发布的那样缩放。

注意：您需要有宽画面才能使其正常工作

Answer 2

他们使用居中的背景图像并允许包含元素缩小，从而隐藏图像的侧面。

例如

#feature {
   background: url("path/to/img") center 0px no-repeat;
   width: 100%;
   height: 50px; // Height of image
}

示例：http: //jsfiddle.net/xY9qT/1/

Answer 3

我用：

max-width: 100%;
height: auto;