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;

它像您发布的那样裁剪而不是缩放。

注意:您需要有宽幅图片才能使其漂亮地工作