html - 图像宽度调整到特定高度

Question

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

图像拉伸宽以填充 div。但我希望它保持纵横比。在侧面给我的垂直图像边框。

我怎样才能做到这一点？请注意，在这张图片中，这个人被拉伸到了这个图像框？我希望它显示正确的比例，但最大高度为 500 像素

<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吗？我认为这应该有所帮助。