使封面图像在移动设备上响应答案

【问题标题】：Making the cover image responsive on mobile devices使封面图像在移动设备上响应
【发布时间】：2014-04-24 03:10:57
【问题描述】：

我的网站首页上有一张封面照片，它在桌面上看起来很好，并且随着浏览器大小的变化而缩放，但在移动设备上打开时看起来绝对可怕。

这是我正在使用的：

.first {
    width: 100%;
    height: 100%;
    background-attachment: fixed;
    position:relative; 
    background: url(../photo.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

我也试过这样做：

 @media only screen and (max-width: 320px) {
    /* Small screen, non-retina */
        .first { 
            background: url(../photo.jpg);
            width: 50%;
            height: 50%; }
    }

    @media only screen and (min-resolution: 2dppx) and (max-width: 320px) {
        /* Small screen, retina */
        .first { 
            background: url(../photo.jpg);
            width: 50%;
            height: 50%; }    
        }

但这没有用。

任何帮助将不胜感激！

【问题讨论】：

它是什么样子的？您能否发布该网站的链接或问题的屏幕截图？
是的，当然！ yudasina.com
我认为这个问题可能是由于移动 viewport 以及您使用 fixed 属性导致的错误定位/大小的 bg 图像引起的修复文档大小，而不是viewport。

标签： html css responsive-design

【解决方案1】：

我们在图像上有一个独特的类，所以设置图像绝对定位，并直接在 CSS 中使用百分比设置宽度。

您不止一次使用相同的类。

.first {
    background: url("../lyuba_final.jpg") no-repeat fixed center center / cover rgba(0, 0, 0, 0);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

在下面查看您的复制

【讨论】：

如果我这样做，照片下方部分的文字会出现在其下方并且箭头不再位于照片上：/
@yudasinal 清理你的css代码，一切都会正常。
好的，谢谢！但与此同时，在我添加那些@media 标签（具有相同的 .first 类）之前，它并没有扩展。但是我怎样才能让它只占据手机页面的一半而不是封面呢？
您还应该在缩放时检查图像的纵横比。看看我们如何保持图像纵横比jsfiddle.net/Y8QC9
抱歉，我刚刚不在线。我一定会投票赞成。如果你想要我，我可以接受它，尽管它实际上并没有解决我的问题：/

【解决方案2】：

<html>
<head>
<style type="text/css">
    .first {
        width: 100%;
        height: 100%;
        background: url(9.jpg) no-repeat;
        background-size: 100%;
/*if you don't want to maintain aspect ratio of image and make it cover entire screen
 use: background-size: 100% 100%;
*/
    }  
</style>
</head>
<body>
<div class="first">
</div>
</body>
</html>

希望这会有所帮助..

【讨论】：

【解决方案3】：

定义可怕？发生什么了？什么移动设备？

如果您以 html 元素为目标，它应该可以很好地缩放。

html { 
  background: url(../photo.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

在移动设备上，图像很可能会被裁剪。

【讨论】：

好点。太可怕了——它只是在可怕的情况下显示了图片的一小部分，它占据了整个屏幕，而我希望在移动设备上看到完整的画面并只占据一半的屏幕。我不能将它用作 html 属性，因为我在网站中有其他背景图片