javascript - 无法在 javascript 中将图像调整为 100%

Question

我有一个 JavaScript slider ，我希望它的宽度为 100%。

这是我的 HTML:

<div id="mhblindsshow">
  <style type="text/css"> #mhblindsshow img { display:none; } </style>                  
  <a href="blogpost.php"><img src="images/main/1.jpg" /></a>
  <a href="blogpost.php"><img src="images/main/2.jpg" /></a>
</div>

这是我的 CSS:

.mhSlideshow {
  position:relative;
  display:block;
  margin:0 auto;    
}

.mhSlideshow img {
  position:absolute;
  top:0px;
  left:0px;
  display:none;
}

这里是控制宽度的javacript。

$(document).ready(function () {
    $("#mhblindsshow").mhslideshow({
        width: $(window).width(), height: 500,
        scaleMode: 'scaleToFill',
        firstSlide: 0,
        randomPlay: false,
        autoPlay: true,
        showShadow: false,
        loopForever: true, loop: 0,
        showBorder: false, borderSize: 6, borderColor: '#FFFFFF',
        effectMode: 'blind', interval: 2500, effectSpeed: 1000,
        totalSlices: 5, sliceInterval: 50,
        showCaption: false,
        textCSS: '.title {
            font-size:12px;
            font-weight:bold;
            font-family:Arial;
            color:#ffffff;
            line-height:200%;
            }
            .alt {
            font-size:12px;
            font-family:Arial;
            color:#ffffff;
            }',
        captionPosition: 'bottom', captionBarColor: '#333333', captionBarOpacity: 0.8, 
        captionBarPadding: 8, captionAlign: 'center',
        showNavArrows: true, autoHideNavArrows: false,
        showNavDots: true, navDotsBottom: 6,
        navDotsAlign: 'right', navDotsLeftRightMargin: 16,
        effect: 'fade',
        jsFolder: 'js'
     });
 });

如果我的图像比窗口大/小，则图像不适合 100%。
我希望图像宽度始终为 100%，高度应根据图像比例灵活调整。

我尝试在 CSS 中添加 width:100%，但没有任何改变。

Answer 1

$("img").css("height","100%");
$("img").css("width","100%");

此代码需要 jquery 库你应该在 html 中使用 class 或 id 所以将是 img.class 或 img#id