我正在尝试获取并排显示的两个图像的 HTML 布局，并填充页面，同时保持其纵横比并保持图像彼此相邻(即不在每一半的中心)页面)。我还想要顶部有一个标题。我几乎已经使用下面的 CSS hackery 实现了这一点。目前它看起来像这样:
如果我水平缩小它，图像会按预期缩小(请注意，SO 已将图像调整为宽度，但“选择图像。”文本大小实际上是恒定的)。
问题是我的图像填满了整个页面，因为我使用的是 CSS vw 和 vh 单位( View 宽度和 View 高度)。它们允许您将宽度或高度设置为整个 View 的百分比，但不是封闭的 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%; 和 height: auto;，而不是对每个图像的高度和最大宽度进行硬编码.
然后您可以在 .halfContainer div 上设置 top: 40px; 以使容器向下 40 像素开始。
最后，将图像的 max-height 设置为 calc(100vh - 40px);，以便它们始终是标题和底部之间的高度这一页。 top: 0; 和 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>关于html - CSS 可调整大小的带标题的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27820643/