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

Answer 2

你需要这样做：

设置高度，宽度100％到<body>
设置高度，宽度100％至.image
添加背景图片
添加背景大小：100％（背景大小100％将覆盖整个空间）

笔：http://codepen.io/anon/pen/aHiBn

要点：https://gist.github.com/anonymous/8935834

响应式图像和文本转换

2 个答案: