更改尺寸时 HTML 幻灯片图像大小不会增加答案

【问题标题】：HTML Slideshow Image Size Does Not Increase When Changing It's Dimentions更改尺寸时 HTML 幻灯片图像大小不会增加
【发布时间】：2014-04-05 06:56:07
【问题描述】：

我正在尝试增加滑块 (HOR1) 中包含的图像的大小，但是当我将其尺寸增加到 800 x 600（例如）时，它似乎并没有增加图像的大小？我如何增加它的大小以使其齐平/填满整个幻灯片？

HTML 源代码：

<div id="content-slider">       
    <ul id="async-slider">
        <li class="slide">
            <div class="three-fifth fl-left" style="width: 425px; height: 242px">
                <h2>Brighter World Lighting - NY</h2>
                <h3><font size="5"><i>"A not just for profit company!"</i></font></h3>
                <p>...</a>
            </div>  

            <img class="fl-right" src="img/logolrg.png" alt="image" width="468" height="329" />      

        </li>
      <li class="slide">
        <div class="three-fifth fl-left">


                <h2>&nbsp;</h2>
            <img class="fl-right" src="img/HOR1.jpg" alt="image" width: 800px; height: 600px /> 
                <h3>&nbsp;</h3>
                <p>...</a>
          </div>    


        </li>

【问题讨论】：

直播网站：www.bwl-ny.com

标签： javascript html css slider slideshow

【解决方案1】：

<img class="fl-right" src="img/HOR1.jpg" alt="image" style="width: 800px; height: 600px;" />

或

<img class="fl-right" src="img/HOR1.jpg" alt="image" width="800" height="600" />

最好使用外部 css 文件，thro.

【讨论】：

在我之后几秒钟，但 +1 用于提及外部 CSS。

【解决方案2】：

两种方法：

1) 您可以使用照片编辑器（绘画、Photoshop..）来增加/减小图像的大小

2) 答：

您应该始终使用 CSS 样式属性： style="width: 800px; height: 600px;"

【讨论】：

【解决方案3】：

您的 HOR1 图像的语法有误。看看logolrg.png中的width和height属性，正确的语法是

<img class="fl-right" src="img/HOR1.jpg" alt="image" width="800" height="600" />

您在 HOR1 中使用了样式语法。只要您将它们包装在这样的样式属性中，它就可以工作：

<img class="fl-right" src="img/HOR1.jpg" alt="image" style="width: 800px; height: 600px;" />

正如 isThisLove 所提到的，通常最好将样式移到外部样式表中。

【讨论】：

谢谢！！这让我可以增加尺寸——但它仍然不是齐平的——它的顶部似乎有大约 2 英寸的填充物防止它齐平。你知道我也可以解决这个问题吗？
由于应用于#async-slider li h2 的 margin-top 和 line-height 样式，它看起来正在下降，所以首先要研究这些。如果你让那个 h2 显示： inline;它将元素移回我屏幕的顶部，但我不确定你想要在那里的确切外观，所以你必须玩弄细节。