Question

我有一个JavaScript滑块，我希望它是宽度的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中添加宽度：100％，但它没有改变任何东西。

Answer 1

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

此代码需要jquery库并且U应该在html使用class或id，因此将是img.class或img＃id

无法在javascript中将图片大小调整为100％

1 个答案: