我正在尝试获取并排显示的两个图像的 HTML 布局，并填充页面，同时保持其纵横比并保持图像彼此相邻（即不在页面每一半的中心） ）。我还想要顶部有一个标题。我几乎已经使用下面的 CSS hackery 实现了这一目标。目前它看起来像这样：
如果我水平缩小它，图像会按预期缩小（请注意，SO 已将图像调整为宽度，但“选择图像。”文本大小实际上是恒定的）。
问题是我的图像填满了整个页面，因为我使用的是 CSSvw and vh单位（视图宽度和视图高度）。它们允许您将宽度或高度设置为整个视图的百分比，但不是封闭的 div 的百分比，因此我不能只是将其放在 div 中（iframe会起作用，但是呃）。因为我的标题是绝对定位的，所以当我垂直缩小窗口时，它看起来像这样：
我的代码如下。有谁知道如何在不诉诸 javascript 调整大小的情况下解决这个问题？
*
{
margin: 0;
padding: 0;
/* Fix CSS. */
box-sizing: border-box;
}
body
{
margin: 20px;
}
html
{
background-color: #f4f4f6;
}
.halfContainer
{
width: 50vw;
height: 100vh;
margin: auto;
padding: 0;
top: 0;
bottom: 0;
position: absolute;
}
#leftContainer
{
left: 0;
}
#rightContainer
{
right: 0;
}
/* AR is height/width. */
#leftImage
{
/* Set to half width, minus padding. 50-padding = 45 */
width: 45vw;
/* Multiply by aspect ratio. 45 * AR = ... */
/*height: 35vw;*/
/* Clip by height if necessary, minus padding. 100-padding*2 = 90 */
max-height: 90vh;
/* Divide by aspect ratio. 90 / AR = ... */
/*max-width: 140vh; */
margin: auto;
position: absolute;
top: 0;
bottom: 0;
right: 5%; /* Padding */
}
#rightImage
{
/* Set to half width, minus padding. 50-padding = 45 */
width: 45vw;
/* Multiply by aspect ratio. 45 * AR = ... */
/*height: 35vw;*/
/* Clip by height if necessary, minus padding. 100-padding*2 = 90 */
max-height: 90vh;
/* Divide by aspect ratio. 90 / AR = ... */
/*max-width: 140vh;*/
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 5%;
}
#instructions
{
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<center><h1 id="instructions">Choose an image.</h1></center>
<div id="leftContainer" class="halfContainer">
<img id="leftImage" src="http://www.washingtonpost.com/news/morning-mix/wp-content/uploads/sites/21/2014/09/Grumpy_Cat_Endorsement-017d7-ULFU.jpg"
style="height: 33.70vw; max-width: 120.15vh;"/>
</div>
<div id="rightContainer" class="halfContainer">
<img id="rightImage" src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg"
style="height: 49.41vw; max-width: 81.95vh;"/>
</div>
</body>
</html>
首先，您可以设置max-width: 100%; and height: auto;在图像标签上，而不是对每个图像的高度和最大宽度进行硬编码。
然后你可以设置top: 40px; on the .halfContainerdiv 使容器开始向下 40 像素。
最后，设置max-height图像的calc(100vh - 40px);这样它们将始终是页眉和页面底部之间的高度。top: 0; and bottom: 0;然后将确保图像与容器的顶部和底部正确对齐。
* {
margin: 0;
padding: 0;
/* Fix CSS. */
box-sizing: border-box;
}
body {
margin: 20px;
}
html {
background-color: #f4f4f6;
}
.halfContainer {
width: 50vw;
margin: auto;
padding: 0;
top: 40px;
bottom: 0;
position: absolute;
}
#leftContainer {
left: 0;
}
#rightContainer {
right: 0;
}
img {
max-width: 100%;
height: auto;
}
#leftImage {
max-height: calc(100vh - 40px);
margin: auto;
position: absolute;
top: 0;
bottom: 0;
right: 5%;
/* Padding */
}
#rightImage {
max-height: calc(100vh - 40px);
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 5%;
}
#instructions {
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
}
<center>
<h1 id="instructions">Choose an image.</h1>
</center>
<div id="leftContainer" class="halfContainer">
<img id="leftImage" src="http://www.washingtonpost.com/news/morning-mix/wp-content/uploads/sites/21/2014/09/Grumpy_Cat_Endorsement-017d7-ULFU.jpg" />
</div>
<div id="rightContainer" class="halfContainer">
<img id="rightImage" src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" />
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
