1

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

在此处输入图像描述

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

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

在此处输入图像描述

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'应该如何？

4

2 回答 2

0

使用这个 CSS 作为你的背景

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

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

于 2016-04-25T12:29:50.900 回答
0

添加overflow: hidden到#main，则不会出现水平滚动，图像不会在小屏幕上缩放，并且由于您已经text-align: center设置，因此仅可以看到图像的中心部分。

于 2016-04-25T12:52:07.423 回答