html - 使大图像响应？

Question

我正在使用我正在编辑的 wordpress 主题(编辑 CSS)为桌面和移动用户制作网站。我的问题是正面图像很大，当低分辨率用户(即手机)连接网站时，图像会调整大小，只显示一小部分。这是解释我的问题的屏幕截图:

这是桌面用户访问的正常网站:

当用户使用小分辨率连接网站(即手机)时，网站会缩小

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

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