<img> 高度 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

下面是一个示例：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;
    }

3. 更改图像选择器：

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

Answer 2

不要使用height:100%;，而是尝试height:100vh;，其中'vh'是'viewport height'

Answer 3

在您的css代码中，使用this-

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

Answer 4

根据图像的大小，您需要使用#adcast img｛width:100%；height:auto｝

或

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

但是您也可以使用它来强制元素的完全填充和适当的缩放（您的包含元素没有任何样式，所以不知道您打算如何处理它）

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

这样，您的图像将是包含元素的100%。现在你可以给#adcast任何你想要的宽度（甚至是100%或100vw），图像将相应地调整大小