0

正常に動作しているプラ​​グインがありますが、ブラウザーのサイズ (変更) が小さくなると、ブラウザーの画面サイズに従って画像の幅が減少しますが、画像の高さは減少しません。

コードは次のとおりです。

 <div id="smart-gallery">
        <a href="images/cubagallery-img-1.jpg" title="First Image">
            <img src="images/cubagallery-img-1.jpg" /></a> 

            <a href="images/cubagallery-img-2.jpg"
                title="Second Image">
                <img src="images/cubagallery-img-2.jpg" /></a> <a href="images/cubagallery-img-3.jpg"
                    title="Third Image">
                    <img src="images/cubagallery-img-3.jpg" /></a> <a href="images/cubagallery-img-4.jpg"
                        title="Fourth Image">
                        <img src="images/cubagallery-img-4.jpg" /></a> <a href="images/cubagallery-img-5.jpg"
                            title="Fifth Image">
                            <img src="images/cubagallery-img-5.jpg" /></a> 
    </div>

以下は、上記のコードの css です。

.min-gallery
{
    max-width: 1400px;
    height: 630px;
    margin: auto;
}
.min-gallery .preview
{
    max-width: 1300px;
    height: 493px;
    margin-top: 36px;
    margin-left: 36px;
    margin-right: 36px;
    position: relative;

    overflow: hidden;
    background-color: White;
}

上記の両方のクラスで、幅を最大幅に変更しました。このため、ブラウザの画面サイズに応じて画像サイズが変更されます。ただし、画像の高さは変わらず、固定されています。このため、画像が消えているときにプロパティの高さを最大高さに変更しました(画像の高さが0pxになることを意味します)。また、min-height に変更すると、ブラウザの画面サイズを大きくしても画像の高さが伸びません。

私は非常によくGoogleをしましたが、この問題を解決する方法がわかりません. この問題を解決するために誰か助けてください。前もって感謝します。

4

1 に答える 1