javascript - 高度 CSS 在轮播中使用百分比调整大小不正确

Question

我有一个 <img>在 <div> 里面.

我的问题/我尝试过的方法

当我输入 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

这是一个例子:http://jsfiddle.net/fk7wuofr/1/

做 1、2 和接下来的 3:

1. 移除边距并将 li 元素 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;
    }

1. 更改图像选择器:

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