Question

我正在使用我正在编辑的wordpress主题（编辑CSS）为桌面和移动用户制作网站。我的问题是前面的图像很大，当低分辨率的用户（即在手机上）连接到网站上时，图像被调整大小并且只显示一个小部分。以下是解释我的问题的屏幕截图：

以下是桌面用户访问的常规网站：

Desktop user

当网站（即使用手机）连接小分辨率的用户时，网站会缩小网站

User on mobile phone

如您所见，图像现在看起来很糟糕。无论如何，当分辨率低，整个图像适合那个屏幕时缩小图像？

这是我用来显示这张图片的CSS：这是DIV的容器和一些段落

* =Featured Content
-------------------------------------------------------------- */

#featured {
 -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 40px;
  padding-bottom: 40px;
  width: 99.893617021277%;
}

#featured p {
  font-size: 18px;
  font-weight: 200;
  line-height: 27px;
  color: #8B0000;
padding-top:250px;
padding-left:50px;
  text-align: left;
width:100%
}
#featured p1 {
  font-size: 18px;
  font-weight: 200;
  line-height: 27px;
  font-style:italic;
  color: #8B0000;
padding-top:50px;
padding-left:50px;
  text-align: left;
width:100%;

}

#featured-image {
  margin: 40px 0 0 0;
}

#featured-image .fluid-width-video-wrapper {
  margin-left: -20px;
}

.featured-image img {
  margin-top: 44px;
}

这里是图像类：

    .col-940new {
  width: 100%;
  height:460px;
  background: url('uploads/19377249_ml-1024x6651.jpg');
}

这里是用于此元素的HTML

<div id="featured" class="grid col-940new">
        <div class="grid col-460">

            <h1 class="featured-title">
                            </h1>

            <h2 class="featured-subtitle">
                            </h2>

            <p>


            </p>



        </div><!-- end of .col-460 -->

        <div id="featured-image" class="grid col-460 fit">



        </div><!-- end of #featured-image --> 

    </div><!-- end of #featured -->

编辑：

在应用了一些评论方法之后我会修复问题，但现在有一个“空白区域”，当用户连接到手机网站时，我想删除它。

代码相同，但添加了这一行：

  background-size: 100% auto;

User view from mobile phone

Answer 1

由于它是背景图片，请将其添加到CSS

DEMO jsFiddle

.col-940new {
  width: 100%;
  height:460px;
  background-image:url('uploads/19377249_ml-1024x6651.jpg');
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
}

Answer 2

如果指定了背景大小的两个组件且不是自动：       背景图像以指定的大小呈现。

如果背景尺寸包含或覆盖：       图像被渲染，保持其固有比例，包含在背景定位区域内或覆盖背景定位区域的最大尺寸。如果图像没有固有的比例，那么它将以背景定位区域的大小呈现。

如果背景尺寸为自动或自动自动：如果图像具有两个内在尺寸，则会以该尺寸渲染。如果它没有内在尺寸且没有固有比例，则以背景定位区域的大小呈现。如果它没有尺寸但有比例，那么它就会被渲染，好像已经指定了包含。如果图像具有一个内在维度和一个比例，则它将以由该一维和比例确定的大小进行渲染。如果图像具有一个固有尺寸但没有比例，则使用内在尺寸和背景定位区域的相应尺寸进行渲染。

如果background-size有一个自动组件和一个非自动组件：       如果图像具有固有比例，则使用指定尺寸渲染它，并从指定尺寸和固有比例计算其他尺寸。如果图像没有固有比例，请使用该维度的指定维度。对于其他维度，如果有图像，则使用图像的相应内在维度。如果没有这样的内在尺寸，请使用背景定位区域的相应尺寸。

source

在您的情况下，宽度和高度都具有内在价值，因此请尝试添加可能适用于移动设备的background-size: 100% 100%;。但是你的图像被拉伸了，所以如果你不想被拉伸你的图像就像最后一样添加封面，就像这种魔法一样：

background-size: 100% cover;

使大图像响应？

2 个答案: