使大图像响应？

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

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

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

如果背景尺寸是包含或盖： 的图像呈现，保持其固有的比例，在包含在最大尺寸，或覆盖，背景定位区域。如果图像没有固有比例，则以背景定位区域的大小进行渲染。

如果背景尺寸是自动或自动自动：如果图像同时具有固有尺寸，则会以该尺寸进行渲染。如果它没有固有尺寸，也没有固有比例，则会以背景定位区域的大小进行渲染。如果它没有尺寸但有一定比例，则它的呈现方式与包含被指定为相反。如果图像具有一个固有维度和一个比例，则它将按照由该维度和比例确定的大小进行渲染。如果图像具有一个固有尺寸但不包含比例，则会使用固有尺寸和背景定位区域的相应尺寸进行渲染。

如果背景尺寸具有一个汽车部件和一个非汽车部件： 如果图像的特性的比例，然后使用指定的尺寸使其和从指定的尺寸和计算出其他尺寸内在比例。如果图像没有固有比例，则使用该维度的指定尺寸。对于其他维度，使用图像的相应固有维度（如果有）。如果没有这种固有尺寸，请使用背景定位区域的相应尺寸。

source

你的情况，你有宽度和高度具有内在价值，从而尝试添加background-size: 100% 100%;这可能对移动设备的工作也。但是，你的图像被拉伸，所以如果你不想被拉伸你的图像只是添加封面终于像这样魔术发生的更多信息：

background-size: 100% cover;