Question

我有一张图片，我指定高度为500px。此图像的宽度为960像素。

图像拉伸以填充div。但我希望它能保持宽高比。给我的垂直图像边框。

我该怎么做？请注意，在此图片中，此人被拉伸到此图像框？我希望它显示正确的比例，但最大高度为500px

enter image description here

<div class="banner">
        <div class="slider-wrapper theme-bar">
            <div id="slider" class="nivoSlider">
                <img src="images/gallery/1/1.jpg" alt="1.jpg" />
            </div>
        </div>
</div>


    .nivoSlider {
        position:relative;
        width:100%;
        height:auto;
        overflow: hidden;
    }
    .nivoSlider img {
        position:absolute;
        top:0px;
        left:0px;
        max-height: 600px;
    }
    .nivo-main-image {
        display: block !important;
        position: relative !important; 
        width: 100% !important;
    }

    /* If an image is wrapped in a link */
    .nivoSlider a.nivo-imageLink {
        position:absolute;
        top:0px;
        left:0px;
        width:100%;
        height:100%;
        border:0;
        padding:0;
        margin:0;
        z-index:6;
        display:none;
    }
    /* The slices and boxes in the Slider */
    .nivo-slice {
        display:block;
        position:absolute;
        z-index:5;
        height:100%;
        top:0;
    }
    .nivo-box {
        display:block;
        position:absolute;
        z-index:5;
        overflow:hidden;
    }
    .nivo-box img { display:block; }

    /* Caption styles */
    .nivo-caption {
        position:absolute;
        left:0px;
        bottom:0px;
        background:#000;
        color:#fff;
        width:100%;
        z-index:8;
        padding: 5px 10px;
        opacity: 0.8;
        overflow: hidden;
        display: none;
        -moz-opacity: 0.8;
        filter:alpha(opacity=8);
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */
    }
    .nivo-caption p {
        padding:5px;
        margin:0;
    }
    .nivo-caption a {
        display:inline !important;
    }
    .nivo-html-caption {
        display:none;
    }
    /* Direction nav styles (e.g. Next & Prev) */
    .nivo-directionNav a {
        position:absolute;
        top:45%;
        z-index:9;
        cursor:pointer;
    }
    .nivo-prevNav {
        left:0px;
    }
    .nivo-nextNav {
        right:0px;
    }
    /* Control nav styles (e.g. 1,2,3...) */
    .nivo-controlNav {
        text-align:center;
        padding: 15px 0;
    }
    .nivo-controlNav a {
        cursor:pointer;
    }
    .nivo-controlNav a.active {
        font-weight:bold;
    }

我明白了，我不得不加上 .nivo-main-image { height: 600px !important; }
并删除
width = 100% – Frantumn 12 mins ago

Answer 1

如果您根本没有指定宽度，则默认情况下会发生这种情况。某处我确定你已经在这张图片上指定了一个宽度，你需要删除它。

Answer 2

我要尝试的第一件事是通过“强力”将宽度更改为自动。

HTML：

<div class="banner">
        <div class="slider-wrapper theme-bar">
            <div id="slider" class="nivoSlider">
                <img class="autowidth" src="images/gallery/1/1.jpg" alt="1.jpg" />
            </div>
        </div>
</div>

CSS：

.autowidth { width: auto!important; }

如果这可以解决您的问题，那么您确实将图像宽度设置在其他地方

Answer 3

你有没有加入 width: auto;班级.nivo-box img？我认为这应该有所帮助。

图像宽度调整到特定高度

3 个答案: