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

Question

我有这个页面：

link

一切都应该达到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%;}
}

你能告诉我如何解决这个问题吗？

Answer 1

publish("producing output file " + outputFileName + " from " + inputFileName) ; 就是您所需要的。这里有一篇关于缩放的好文章：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images

试试这个......

<强> html

background-size: cover

<强> css

<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>