css - 响应式图像和文本过渡

Question

如何在 iPhone 和台式机上制作适合 100% 宽度和 100% 高度的响应式图像。我的意思是这样 - http://themeforest.unitedthemes.com/wpversions/brooklyn/elegant/如果它从任何一侧牺牲一点图像也没关系，但它应该保持纵横比并且应该适合整个屏幕我试过但是没用

我注意到顶部图像上的过渡和文本。我们该怎么做。

到目前为止，这是我的代码

HTML

<div id="body">
    <div>
        <img src="1.jpg" class="image" />
    </div>
</div>

CSS

.image {
    position: absolute;
    top: 0;
    left: 0;
    max - width: 100 % ;
    max - height: 100 % ;
    width: auto;
}

但这里的问题是图像不适合屏幕的高度和宽度。如何像我提供的链接中那样实现上述 100% 的宽度和高度。

Answer 1

不要使用图像来实现此目的，而是使用背景图像并设置以下 css:

#body{
  background-image:url(yourimgurl);
  background-position:50% 50%;
  background-size:cover;
}

它会导致您的图像跨越整个容器，并在它较小时从两侧剪掉一点。

Fiddle