<img> height CSS調整大小與旋轉木馬中的百分比不正確

Question

我在<div>內有<img>。

我的問題/我曾嘗試

當我把width: 100%;的<img>需要的寬度和高度爲100％，而不是僅僅的寬度。當我把height: 100%;，它也不起作用。

我試過body,html{ width:100%, height:100;}但是這並沒有產生所需的結果。

我需要什麼

幻燈片需要根據屏幕分辨率來調整，但每張幻燈片內的圖像應保持相同的大小所有的屏幕分辨率。

HTML

<div id="adcast-wrap" class="content"> 
     <div class="overflow"> 
      <ul id="adcast"> 
       <li class="adcast-item is-active"><img src="images/adcast-1.jpg" alt="" /></li> 
       <li class="adcast-item"><img src="images/adcast-2.jpg" alt="" /></li> 
       <li class="adcast-item"><img src="images/adcast-3.jpg" alt="" /></li> 
       <li class="adcast-item"><img src="images/adcast-4.jpg" alt="" /></li> 
       <li class="adcast-item"><img src="images/adcast-5.jpg" alt="" /></li> 
      </ul><!-- #adacst --> 
      <div id="pager"> 
       <img src="images/bullet-1.png" alt="" class="pager-item fleft is-active" data-adcast="0" /> 
       <img src="images/bullet-2.png" alt="" class="pager-item fleft" data-adcast="1" /> 
       <img src="images/bullet-3.png" alt="" class="pager-item fleft" data-adcast="2" /> 
       <img src="images/bullet-4.png" alt="" class="pager-item fleft" data-adcast="3" /> 
       <img src="images/bullet-5.png" alt="" class="pager-item fleft" data-adcast="4" /> 
      </div><!-- #pager --> 
     </div><!-- .overflow --> 
    </div><!-- #adacst-wrap --> 

<script src="slideshow.js"></script> 
<script> 
(function() { 
    "use strict"; 
    /*global document:false */ 
    var $ = function(selector) { 
     return document.querySelectorAll(selector); 
    }, 
     $adcasts = $('.adcast-item'), 
     $pagers = $('.pager-item'); 

    adcast.init({ 
     adcasts: $adcasts, 
     pagers: $pagers, 
     pagersClick: true 
    }); 

}()); 
</script> 

CSS

* 
{ 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    border: none; 
} 
body, html 
{ 
    height: 100%; 
    width: 100%; 
    background: #fff; 
} 
a 
{ 
    text-decoration: none; 
} 
a:hover 
{ 
    text-decoration: underline; 
} 
.content 
{ 
    display: inline-block; 
    width: 100%; 
    height: 100%; 
    margin: 0 auto; 
} 
.fleft 
{ 
    float: left; 
} 
.fright 
{ 
    float: right; 
} 
.clear 
{ 
    clear: both; 
} 
.overflow 
{ 
    overflow: hidden; 
} 
.hidden-text 
{ 
    overflow: hidden; 
    text-indent: 100%; 
    white-space: nowrap; 
} 
.is-hidden 
{ 
    display: none; 
} 
img 
{ 
    width: 100%; 
    height: 100%; /* <-------- Here is the issue */ 
} 
#adcast-wrap 
{ 
    display: inline-block; 
    width: 100%; 
    height: 40%; 
    padding: 1%; 
    margin-top: 5%; 
    background: #000; 
    margin-bottom: 1%; 
    position: relative; 
} 
#adcast-wrap .overflow 
{ 
    height: 100%; 
    position: relative; 
} 
.adcast-item 
{ 
    margin: 0 1% 1% 0; 
    position: absolute; 
    top: 0; 
    left: 0; 
    transition: 2s; 
    opacity: 0; 
} 
#adcast .is-active 
{ 
    opacity: 1; 
} 
#pager 
{ 
    background: rgba(255, 255, 255, 0.3); 
    padding: 1%; 
    position: absolute; 
    z-index: 10; 
    right: 0%; 
    bottom: 0%; 
} 
.pager-item 
{ 
    cursor: pointer; 
    border: 2px solid transparent; 
    width: 30px; 
    height: 30px; 
    border-radius: 50%; 
} 
.pager-item:hover, .pager-item.is-active 
{ 
    border: 2px solid #FF0207; 
} 

Answer 1

而不是使用height:100%;嘗試height:100vh;其中'vh'是'viewport height'

Answer 2

在你的CSS代碼，使用這 -

body, html { 
    height: 100%; 
    width:100%; 
    background: #fff; 
    overflow-x:auto;} 

Answer 3

根據圖片的大小，您需要使用 #adcast img {width：100％;高度：汽車}

或

#adcast img{width:auto; height:100%} 

，但你也可以用它來強制元素和適當比例的完全填充（您包含的元素沒有造型無論如何，所以不知道你有什麼打算用它做）

#adcast img{width:auto; min-width:100%; height:auto} 

這樣，你的圖像將是100％f的包含元素。現在，你可以給#adcast任何你想要的寬度（甚至100％或100vw）和圖像將相應調整

Answer 4

這裏有一個例子：http://jsfiddle.net/fk7wuofr/1/

做1,2和未來3：

1. 取出保證金，並把李項100％：

   .adcast-item { 
   /* margin: 0 1% 1% 0; */ 
   position: absolute; 
   top: 0; 
   left: 0; 
   transition: 2s; 
   opacity: 0; 
   width: 100%; 
   height: 100%; 
   } 
   

2. 刪除多餘的寬度：

   #adcast-wrap { 
   display: inline-block; 
   width: 98%; /* <------ -2% */ 
   height: 40%; 
   padding: 1%; 
   margin-top: 5%; 
   background: #000; 
   margin-bottom: 1%; 
   position: relative; 
   } 
   

，或者如果你想要全屏：

#adcast-wrap { 
    display: inline-block; 
    width: 98%; 
    height: 98%; /* <--- This not works flawless for me in Chrome */ 
    /* it put me the scrollbars (but a little) */ 
    padding: 1%; 
    background: #000; 
    position: relative; 
    } 

更改圖像選擇：

.adcast-item img { 
width:100%; 
height:100%; 
}