彈性佈局的自動縮放圖像

如何在具有彈性佈局的網站上顯示兩幅圖像，並排放置到50％的父容器？彈性佈局的自動縮放圖像

昨晚我在玩它，但沒有去太多。

當我去與divs，他們互相重疊或第二個圖像顯示在下面的第一個。

當我走了表，表變得比屏幕更寬，導致垂直滾動條。

我不知道什麼尺寸的圖像是什麼大小的圖像，也沒有什麼決議用戶正在意識到我會純粹通過CSS設置它，而不使用JavaScript。

我有幸在其他頁面上使用單個圖像自動縮放以適應容器，通過設置max-width:90%但我無法在這裏應用此技巧。有趣的是，這種情況下，根據窗口（父元素）設置最大寬度，而在上面的示例中，根據圖像本身的寬度設置最大寬度。

對不起，我的英文，如果有什麼不清楚，請提問。

謝謝

來源

2009-10-30 Resistante

我明白你的意思了。我有一個問題，他們只是有點太寬，所以我稍微放了一點差距，因爲它不會在百分號中佔據一小部分。看看這將這樣的伎倆：

<html> 
<head> 
<style> 
div { 
width: 80%; 
background: #acf; 
} 
div img { 
width: 50%; 
padding: 0; 
margin: 0 -0.2em 0 0; 
} 
</style> 
</head> 
<body> 

<div> 
<img src='a.jpg' /> 
<img src='b.jpg' /> 
</div> 

</body> 
</html>

編輯：甚至更好，如果你所有的都在框中的圖像，不讓它包裹都：

<html> 
<head> 
<style> 
div { 
width: 80%; 
background: #acf; 
white-space: nowrap; 
overflow: visible; 
} 
div img { 
width: 50%; 
padding: 0; 
margin: 0; 
} 
</style> 
</head> 
<body> 

<div> 
<img src='a.jpg' /><img src='b.jpg' /> 
<!-- Don't put a space between the images. --> 
</div> 

</body> 
</html>

來源

2009-10-30 19:03:49 bradlis7

我覺得真正的關鍵是確保''陳述之間沒有空格或回車。 – bradlis7 2009-10-30 19:36:32

忘了提及，我想這些圖像包裝在一個div有花哨的邊框和每個頂部的信息欄，但調整後的佈局，一切都像夢一樣，謝謝一堆！ – Resistante 2009-10-30 20:40:36

彈性佈局的自動縮放圖像

回答

相關問題