我正在尝试使用 flex box 制作一个纯 HTML/CSS 网站，使用的图像占左侧 50%，文本框占右侧 50%，页脚占 100%它们下面的宽度(稍后我想添加一个导航，也许是一个汉堡菜单，与这个问题 atm 无关)，同时使它们响应不同尺寸的设备。 *我希望图像和右边的文本框在较小的设备上换行成一列(文本框顶部的 img)
我遇到的问题是，将图像设置为 max-width 或 max-height 100% 使其大于它所在的 div 容器，图像没有完全填满框，(我想保留图片与原始尺寸成比例)
正如您在下面看到的，图像并没有占据容器的 100%，下面的 CSS 并不是我一直在试验的唯一 CSS。但我一直在查看我在 stackoverflow 等上找到的其他文章，但没有找到完全相同的问题；
body {
font-family: 'Roboto Mono', monospace;
margin: 0px;
padding: 0px;
text-align: left;
display:block
}
img {
// width:auto;
max-height: 100%;
// overflow: none;
// position: absolute;
height: 400px;
// max-width: 100%;
top: 0;
bottom: 0;
border: 1px solid green;
}
.container {
display: flex;
flex-flow: row wrap;
}
.container > * {
padding: 0px;
flex: 1 100%; }
@media all and (min-width: 600px) {
.content {
flex: 1 0;
}
}
最佳答案
请检查以下示例。它可能对您有帮助。
*, ::after, ::before {
box-sizing: border-box;
}
body {
margin: 0;
font-family:sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
}
img {
max-width: 100%;
}
.container {
width: 100%;
max-width: 1140px;
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
}
.content {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
}
.content .col {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
padding-left: 15px;
padding-right: 15px;
}
.footer {
background: #eee;
height: 100px;
}
@media(max-width: 767px){
.content .col {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
} <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
</head>
<body>
<div class="wrapper">
<main>
<div class="container">
<div class="content">
<div class="col left">
<img src="https://images.pexels.com/photos/994517/pexels-photo-994517.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" title="" alt=""/>
</div>
<div class="col right">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</main>
<footer>
<div class="footer"></div>
</footer>
</div>
</body>
</html>关于html - CSS flexbox 两列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55056416/