0

画像があり、高さを 500px に指定しています。この画像は幅960pxの分割です。

画像は div を埋めるために広く伸びます。しかし、アスペクト比を維持したいと思います。横に縦の画像の境界線を付けます。

これどうやってするの？この画像では、人物がこの画像ボックスに引き伸ばされていることに注意してください。正しい比率で表示したいのですが、最大高さは 500px です

ここに画像の説明を入力

<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

4

3 に答える 3

0

クラスに追加し width: auto;ましたか？.nivo-box imgこれが役立つと思います。

于 2012-08-30T19:01:56.827 に答える
0

幅をまったく指定しない場合、これはデフォルトで行われます。どこかでこの画像の幅を指定したと確信しており、それを削除する必要があります。

于 2012-08-30T18:28:15.153 に答える
0

最初に試すのは、「力ずく」で幅を自動に変更することです。

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

これで問題が解決した場合は、実際に画像の幅が別の場所に設定されています

于 2012-08-30T18:58:24.663 に答える