Question

我有一个图像以完整的浏览器屏幕为中心，如下所示

我试图在不缩放的情况下获得图像响应。意味着我不想要响应，图像应该很小。我只想在最小尺寸的浏览器屏幕中心部分图像应该总是看到。就像增加浏览器屏幕尺寸从小到大一样，应该看到图像的左右部分。

在较小的屏幕上，图像应如下所示，图像的宽度不应改变。也不应该有水平滚动。

HTML代码

<section id="main">
    <header>
        <span class="avatar"><img src="images/test.jpg" alt="" /></span>
    </header>
</section>

Css代码

#main {
    position: relative;
    max-width: 100%;
    min-width: 27em;
    padding: 4.5em 3em 3em 3em ;
    border-radius: 4px;
    cursor: default;
    opacity: 0.95;
    text-align: center;
    -moz-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -moz-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    transform: rotateX(0deg);
    -moz-transition: opacity 1s ease, -moz-transform 1s ease;
    -webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
    -ms-transition: opacity 1s ease, -ms-transform 1s ease;
    transition: opacity 1s ease, transform 1s ease;
}

#main .avatar {
    width: 90%; 
    text-align: center; 
    overflow: hidden;  
}

#main .avatar img {
    position: relative; 
    left: 100%;  
    margin-left: -200%;
}

上面css我看到图像的中心部分，但我正在进行水平滚动。

任何人都请告诉我，我应该如何获得响应式图像（没有水平滚动）而不会在响应时更改图像大小？

修改

'test.jpg'是人物形象，而不是背景图像。背景图像是不同的。人物形象的行为应该像背景图像一样

http://cdn.sixrevisions.com/0431-01_responsive_background_image_demo/responsive-full-background-image-demo.html

请建议我css对于'test.jpg'应该如何？

Answer 1

将此css用作背景

#main{
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

这不会改变图像的大小，只有可能的中心部分可见。

Answer 2

将overflow: hidden添加到#main，然后水平滚动不会出现，图片不会在小屏幕上缩放，因为您已设置text-align: center，只是中心部分图像将可见。

没有缩放的响应式图片

2 个答案: