根據寬高比更改圖像的寬度

Question

我正在建立一個漫畫閱讀網站。 我在顯示圖像方面遇到了問題。 我的大多數圖像都具有2/3的寬高比。 意味着1000x1500。 所以我用下面的css規則顯示它們。 但是有一些像雙頁圖像的圖像。 因此，當應用css規則max-width=728px時，這個4/3 raito圖像無法讀取任何內容。 所以基本上我想在用戶遇到4/3比例圖像時更改max-width=728px的css規則。 Css規則max_width=728px仍然必須應用2/3比率圖像，但當比率變為4/3時，它必須是max-width=1250px 。 我需要做些什么來解決這個問題？ 它與css或需要一些javascript有關。 我認為這個漫畫網站有這個未來。 雙頁圖像顯示寬度〜1300，當我收縮瀏覽器時，它的javascript更新寬度和高度。

示例： http ： //www.mangaeden.com/en/en-manga/berserk/344/17/我的網站： http ： //mangabozok.com/oku/Berserk/346/5

HTML：

<div class="gnc02">
<img src="paths">
</div>

CSS：

.gnc02 img {
     display:block;
     margin:auto;
     max-width: 728px;
     height: auto;
}

Answer 1

.gnc02 {
    max-width: 728px;
    display:block;
    margin:auto;
}

.gnc02 img {
    max-width: 100%;
    float:left;
}

Answer 2

您可以嘗試以下樣式：

.gnc02 img
{
    display: block;
    margin: auto;
    max-width: 1250px;
    max-height: 1092px;
}

對於2：3圖像，應用max-height並將寬度限制為728像素。 對於4：3圖像， max-width適用並將寬度限制為1250像素。

 .gnc02 img { display: block; margin: auto; max-width: 1250px; max-height: 1092px; } 

 <div class="gnc02"> <img src="http://cdn.mangaeden.com/mangasimg/82/82018e71734a3893bc60f2e3a5df4520b1343c862ef09e3c7b30fd1d.jpg" /> </div> <br/> <div class="gnc02"> <img src="http://cdn.mangaeden.com/mangasimg/d6/d6afc1d18c0c08d6129f121a3531f47933d8fdbccca0ea7f78ed10e8.jpg" /> </div> 

注意：運行代碼段時，應切換到“整頁”模式。

Answer 3

試試這個

 .gnc02 { width: 99% !important; display:block; margin:auto; } .gnc02 img { max-width: 100%; } 

 <div class="gnc02"> <img src="http://cdn.mangaeden.com/mangasimg/82/82018e71734a3893bc60f2e3a5df4520b1343c862ef09e3c7b30fd1d.jpg" /> </div> 

此代碼用於響應式設計。 我認為這可以幫助您處理任何類型的圖像或圖像的大小。