不同寬度的響應imgs與高度相同

我不確定如何使用短語來表達我需要的內容，但基本上我有三種不同的圖像，我希望保持相同的比例，但它們的大小不一樣。我想它看起來像這樣： |------| |----------| |--| | Img1 | | Img2 | | 3| |------| |----------| |--| 不同寬度的響應imgs與高度相同

並讓它們響應地縮放。這裏的HTML和CSS：

@media all and (max-width: 775px) { 
 
    \t .aboutbody, .sidebar { 
 
    \t \t display: block; 
 
    \t } 
 
    
 
    \t .sidebar { 
 
    \t \t width: 86%; 
 
    \t \t margin-left: 7%; 
 
    \t \t height: 300px; 
 
    \t } 
 
    
 
    \t .sidebarpics { 
 
    \t \t height: 200px; 
 
    \t \t width: auto; 
 
    \t \t display: inline-block; 
 
    \t } 
 
    }

<div class="sidebar"> 
 
     <img class="sidebarpics" img src="assets/family1.jpg"> 
 
     <img class="sidebarpics" src="assets/speaking1.jpg"> 
 
     <img class="sidebarpics" src="assets/family2.jpg"> 
 
    </div>

下面是我在實時更新的網站。 http://hanksmith.com/about.php 要理解你需要縮小瀏覽器窗口，直到一邊的三張圖片移動到頂部。

來源

2016-12-21 B Johnson

嗨，我不確定你到底想要什麼。但我猜你想要所有3張圖片都是相同的高度。但現在來了困難的部分。在哪個比例？你是否允許從他們的比例中拉伸和擠壓圖像？由於他們都有不同的。 –

你可以給'sidebarpics' div一個'width：30％'和'height：auto'？然而，如上所述，使得一張照片比其他照片高。 Squishing似乎不是一個選項，雖然.. – Goombah

如果可能的話，我想保持它們與它們的比例相同。因此，有一張圖片覆蓋了div的20％，一張覆蓋了60％，一張覆蓋了40％（不是精確的數字），然後都是相同的高度，因此它是齊平的。 –

嘗試垂直排列頂部。忽略高度玩，以百分比玩寬。

@media (max-width: 775px){ 
.sidebarpics { 
    max-width: 32%; 
    width: auto; 
    display: inline-block; 
    vertical-align: top; 
    max-height: 100px; 
} 
}

來源

2016-12-21 08:14:49

這就是我最終做的。儘管它不完美，但它運作良好。感謝您的建議！ –

這與我所建議的大致相同。在這裏，您交易「不切斷」對抗水平層上的圖像之間的醜陋白色空間。 –

@BJohnson：我不明白這是如何解決你的問題的，因爲它不會將所有圖像拉伸到可用的整個寬度，「只是」使所有高度相同（除非你也手動設置寬度）。沒關係，如果這是你正在尋找的東西，但我理解你的問題的方式不同。 – TheThirdMan

使用flex

.sidebar { 
    display: flex; 
}

，並給每個圖像的百分比寬度。

見fiddle

來源

2016-12-21 07:49:41 Dotan

我建議給他們一個百分比寬度，給每個孩子有自己的寬度，使他們採取的可用空間。

事情是這樣的：

.sidebarpics:nth-child(1) 
{ 
    width: 18%; 
    height: auto; 
} 

.sidebarpics:nth-child(2) 
{ 
    width: 36%; 
    height: auto; 
} 

.sidebarpics:nth-child(3) 
{ 
    width: 40%; 
    height: auto; 
}

來源

2016-12-21 07:50:03 Goombah

這是一個好主意。謝謝！ –

由於您使用@media查詢，分享你的圖像。您可以在%

嘗試分享他們的寬度這樣

@media all and (max-width: 775px) { 
.aboutbody, .sidebar { 
    display: block; 
} 

.sidebar { 
    width: 86%; 
    margin-left: 7%; 
    height: 300px; 
} 

.sidebarpics:first-child { 
    height: 200px; 
    width: 30%; /*share the two imgs to any % you like*/ 
    float: left; 
    display: inline-block; 
} 
.sidebarpics:nth-child(2) { 
    height: 200px; 
    width: 70%; 
    float: left; 
    display: inline-block; 
} 
.sidebarpics:last-child { 
    height: 200px; 
    width: 100%; 
    display: inline-block; 
} 
} 

@media all and (max-width: 600px) { 
.sidebarpics:first-child { 
    height: 200px; 
    width: 100%; 
    float: none; 
} 
.sidebarpics:nth-child(2) { 
    height: 200px; 
    width: 100%; 
    float: none; 
    display: inline-block; 
} 
.sidebarpics:last-child { 
    height: 200px; 
    width: 100%; 
    display: inline-block; 
} 
}

來源

2016-12-21 07:55:16

在你的情況下，縱橫比的問題。

有很多解決方案，但我會建議使用3個小版本，並在小屏幕上顯示它們而不是它們。如果你喜歡這個想法，那麼我可以給你寫一些代碼。

來源

2016-12-21 07:56:23 Aslam

我認爲這可能是我最好的選擇。我很想嘗試你的代碼。謝謝！ –

哦，在這裏使用圖片標籤將是一個好主意。但包括不同斷點的img元素不盡相同。 –

你可以只限制最大寬度爲每張圖片：

@media (max-width: 775px) { 
    .sidebarpics { 
    max-width: 32%; 
    display: inline-block; 
    } 
}

來源

2016-12-21 07:56:23 Banzay

這是很難管理的以下內容：圖像

保持比單獨
所有相同的高度
不切割任何圖像

如果最後一點是你可以避開的，我會建議如下。在父容器上使用定義的高度，並溢出：hidden;切斷高處以上的一切。圖像對齊頂部，並有一個最大寬度，以確保它們相互適合。如果您不介意升級，請改用寬度。

.sidebar { 
    height: 300px; 
    overflow: hidden; 
} 
.sidebar img { 
    display: inline-block; 
    vertical-align: top; 
    max-width: 33%; 
}

來源

2016-12-21 07:57:20

不同寬度的響應imgs與高度相同

回答

相關問題