兩個圖像，並排響應
[英]Two images, side by side responsive
問題描述
此着陸頁的最終目標是並排放置兩個圖像，兩個圖像的高度均為100％，寬度為50％，以保持縱橫比並隱藏溢出。
這似乎應該很簡單，但是無論我如何嘗試，我都遇到了問題。
目前，我得到以下信息：
<head>
<link rel="stylesheet" href="Stylesheets/default.css">
</head>
<body>
<div class="page">
<div class="img-wrapper">
<a href="pol.html"><img src="Images/cal-engel-531490-unsplash.jpg"></a>
</div>
<div class="img-wrapper">
<a href="biz.html"><img src="Images/rawpixel-660717-unsplash.jpg"></a>
</div>
</div>
</body>
.page {
width: 100%;
height: 100vh;
white-space: nowrap;
}
.img-wrapper {
position: relative;
}
img {
float: left;
width: 50%;
height: 100vh;
}
這已經達到了高度和寬度的目標，但是到目前為止，我的修補工作還沒有使圖像按比例調整並消除了溢出。
到現在為止，我一直在搜索並沒有找到解決該問題的方法，如果我在某處錯過了一篇非常明顯的文章，我們深表歉意。 任何幫助表示贊賞！
5 個解決方案
解決方案1
1 2018-06-23 03:28:11
我只是給他們做背景圖片。 這樣，您就不必擔心溢出。 在這里，我將錨設置為寬度和高度的100％（容器的寬度和高度，所以分別為頁面的50％），這似乎就是您想要的。 background-position可將左右圖像分別錨定在右上角和左上角，並且封面的background-size可確保縱橫比保持完整。 請注意，如果您的圖像比寬高，則可能不會達到預期的效果。
body { margin: 0; } .page { width: 100%; height: 100vh; font-size: 0; display: flex; flex-flow: row nowrap; justify-content: stretch; } .img-wrapper { flex: 1 1 50%; } .img-wrapper a { display: block; width: 100%; height: 100vh; background-repeat: no-repeat; } .img-wrapper:first-child a { background-image: url(https://picsum.photos/300/200); background-position: top 0 left 100%; background-size: cover; } .img-wrapper:last-child a { background-image: url(https://picsum.photos/300/200); background-position: top 0 right 100%; background-size: cover; }
<body> <div class="page"> <div class="img-wrapper"> <a href="pol.html"></a> </div> <div class="img-wrapper"> <a href="biz.html"></a> </div> </div> </body>
解決方案2
0 2018-06-23 02:43:49
嘗試添加
.page { overflow: hidden; }
您的代碼。 希望這可以確保隱藏任何溢出的內容。
解決方案3
0 2018-06-23 02:45:56
您已為圖像賦予width:50%而不是其父元素。
<head> <link rel="stylesheet" href="Stylesheets/default.css"> <style> .page { width: 100%; height: 100vh; white-space: nowrap; } .img-wrapper { position: relative; float: left; width: 50%; } .img-wrapper a { display: block; } img { width: 100%; height: 100vh; } .clear { clear: both; } </style> </head> <body> <div class="page"> <div class="img-wrapper"> <a href="pol.html"> <img src="Images/cal-engel-531490-unsplash.jpg"> </a> </div> <div class="img-wrapper"> <a href="biz.html"> <img src="Images/rawpixel-660717-unsplash.jpg"> </a> </div> <div class="clear"></div> </div> </body>
解決方案4
0 2018-06-23 02:50:43
使用flex並將其子元素的寬度設置為50％。 刪除正文的默認邊距。 並且要消除由於圖像引起的空白，請在.page div上添加font-size:0 。 顯然，稍后在該頁面上此部分顯示文本時，可以改用該字體大小。
body { margin: 0; } .page { width: 100%; height: 100vh; font-size: 0; display: flex; } .img-wrapper { width: 50%; } img { width: 100%; height: 100%; }
<body> <div class="page"> <div class="img-wrapper"> <a href="pol.html"><img src="https://picsum.photos/300/200"></a> </div> <div class="img-wrapper"> <a href="biz.html"><img src="https://picsum.photos/300/200"></a> </div> </div> </body>
解決方案5
0 已采納 2018-06-25 02:45:14
這是我達成的解決方案。 我遇到的主要問題是我分配了
width:50%到img而不是容器。
這是按預期工作的最終（ish）代碼塊。 感謝您的建議！
html, body {
height: 100%;
margin: 0;
}
#wrapper {
min-height: 100%;
}
.page {
width: 100%;
max-height: 100vh;
white-space: nowrap;
overflow: hidden;
}
.img-wrapper-l {
height: 100%;
width: 50%;
overflow: hidden;
position: absolute;
float: left;
}
.img-wrapper-r {
height: 100%;
width: 50%;
overflow: hidden;
position: relative;
float: right;
}
img {
height: auto;
width: auto;
max-width: 1200px;
max-height: 1200px;
}
html, body { height: 100%; margin: 0; } #wrapper { min-height: 100%; } .page { width: 100%; max-height: 100vh; white-space: nowrap; overflow: hidden; } .img-wrapper-l { height: 100%; width: 50%; overflow: hidden; position: absolute; float: left; } .img-wrapper-r { height: 100%; width: 50%; overflow: hidden; position: relative; float: right; } img { height: auto; width: auto; max-width: 1200px; max-height: 1200px; }
兩個圖像並排和響應
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.