使大图像响应？

Question

我正在使用正在编辑（编辑CSS）的wordpress主题为台式机和移动用户创建网站。 我的问题是正面图像很大，当分辨率较低的用户（例如，在手机上）在网站上连接时，图像会被调整大小，仅显示一小部分。 这是解释我的问题的屏幕截图：

这是桌面用户访问的普通网站：

当具有较小分辨率的用户连接到网站（例如，使用手机）时，这里的网站缩小了

如您所见，图像现在看起来很糟糕。 当整个图像适合该屏幕的分辨率较低时，是否仍要缩小图像？

这是我用来显示此图片的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;

Answer 1

由于它是背景图像，因此请将其添加到CSS

演示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是auto或auto auto：如果图像具有两个固有尺寸，则以该尺寸渲染。 如果没有固有尺寸且没有固有比例，则以背景定位区域的大小进行渲染。 如果没有尺寸但是有比例，则将其渲染为好像已指定contain。 如果图像具有一个固有尺寸和比例，则以该尺寸和比例确定的尺寸进行渲染。 如果图像具有一个固有尺寸但没有比例，则使用固有尺寸和背景定位区域的相应尺寸进行渲染。

如果背景尺寸具有一个自动分量和一个非自动分量：如果图像具有固有比例，则使用指定的尺寸进行渲染，然后根据指定的尺寸和固有比例计算另一个尺寸。 如果图像没有固有比例，请使用指定的尺寸作为该尺寸。 对于另一维，如果存在一个维，则使用图像的相应固有维。 如果没有此类固有尺寸，请使用背景定位区域的相应尺寸。

资源

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

background-size: 100% cover;