如何扩展此图片以覆盖我的页面宽度？

一切都应该达到720像素的分辨率。

我基本上喜欢我的幻灯片中的图像，直到结束。我把照片更清晰地理解了我的意思。

代码HTML：

<div id="slideshow" style="background: #F0F0F0;"> 
<div class="sub-menu" style="color: #ababab; font-family: myFirstFont; font-size: 12pt; float: left; margin-top: 20px; margin-right: 2%;"><img src="/wp-content/themes/wpbootstrap/images/logo-arrow.png" alt="">Highlights from previous purchases</div> 
     <ul style="margin-bottom: 0px;"> 

     <li style="display: list-item;"> 
    <img src="/wp-content/themes/wpbootstrap/images/imag_home-1.png" alt="photo1"></li> 

     <li>//same code HTML</li> 
     <li>//same code HTML</li> 
     <li>//same code HTML</li> 
      //.... 
     </ul> 
    </div> 
    </div>

我试图用这个CSS代码但不工作：

@media (max-width: 720px){ 
    #slideshow li img{width:100%;} 
}

你能告诉我怎么解决这个问题？

来源

2015-11-02 cristi

你想要的形象维护相同[宽高比]（https://en.wikipedia.org/wiki/Aspect_ ratio_（图像））？ – Eric

'#slideshow li img {width：100％;}'很好，你已经包含了一个很大的透明部分作为你图片的一部分。你也想删除'#slideshow ul li'上的'height'＃ –

http://i65.tinypic.com/rt22l5.jpg我删除了你说的代码，看看它现在是怎么样的......都不是以及 – cristi

background-size: cover是你需要的。这是一个很好的文章在这里缩放：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images

尝试......

html

<div id="slideshow"> 
    <div class="sub-menu"><img src="/wp-content/themes/wpbootstrap/images/logo-arrow.png" alt="">Highlights from previous purchases</div> 
     <ul> 
      <li id="image1">&nbsp;</li> 
      <li id="image2">//same code HTML</li> 
      <li id="image3">//same code HTML</li> 
      <li id="image4">//same code HTML</li> 
      //.... 
     </ul> 
    </div> 
</div>

css

ul { 
    margin-bottom: 0px; 
} 
ul > li { 
    display: list-item; 
} 
#slideshow { 
    background: #F0F0F0; 
} 
#slideshow > .submenu { 
    color: #ababab; 
    font-family: myFirstFont; 
    font-size: 12pt; 
    float: left; 
    margin-top: 20px; 
    margin-right: 2%; 
} 

.image1 { 
    height: 200px; /* The height of the image */ 
    background: url('/wp-content/themes/wpbootstrap/images/imag_home-1.png') no-repeat 50% 50% fixed; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    -webkit-background-size: cover; 
    background-size: cover; 
}

来源

2015-11-02 16:56:51 Eric

如何扩展此图片以覆盖我的页面宽度？

回答

相关问题