你如何只用CSS水平缩放/缩小图像?

时间:2013-05-18 08:55:43

标签: html css

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

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

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

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

    img.mail {

    width: 100%;
    height: auto;

    }

3 个答案:

答案 0 :(得分:2)

或者你是说这个?

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

    width: 100%;
    height: 100px;

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

注意:您需要拥有广泛的图片才能让它精彩地工作

答案 1 :(得分:0)

我用:

max-width: 100%;
height: auto;

答案 2 :(得分:0)

他们正在使用居中的背景图像,并允许包含元素缩小,从而隐藏图像的边。

e.g。

       

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

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