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：

删除保证金并将li项目100％：

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

删除额外的宽度：

#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%;
}

Answer 2

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

Answer 3

在你的css代码中，使用这个 -

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

Answer 4

根据图片的大小，您需要使用 #adcast img {width：100％;高度：自动}

或

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

但你也可以使用它强制完全填充元素和正确的缩放（你的包含元素没有任何样式，所以不知道你打算用它做什么）

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

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

<img/> height CSS在轮播中使用百分比错误地调整大小

4 个答案: