这应该很容易......但出于某种原因，我无法解决这个问题。我想要两列彼此相邻。左列用于文本，右列用于图像。另外，我想使用 flex，但无论我将其包含在 HTML 中还是尝试创建背景图像，我都无法让 img 响应。
首先，我尝试使用网格，因为这可能会变得更加复杂。但是，img 也不会响应。我认为我缺少一个关于响应式图像的基本概念(即使我设置了宽度:100％，高度:自动和最大宽度:100％)。
最后，我需要一些看起来像这样的东西(我将有文本图像和图像文本布局):
我在这里做错了什么？这是我的 HTML 代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>EB-6590</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="styles/index.processed.css">
</head>
<body>
<div class="sh-ref-nfh2-container">
<div class="sh-ref-nfh2-content">
<div class="sh-ref-nfh2-left">
Left
</div>
<div class="sh-ref-nfh2-right">
<img src="https://via.placeholder.com/683x600.png?text=Responsive">
</div>
</div>
</div>
</body>
</html>
这是 (S)CSS:
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.sh-ref-nfh2-container {
position: relative;
overflow: hidden;
width: 1366px;
height: 600px;
.sh-ref-nfh2-content {
position: relative;
width: 100%;
height: inherit;
max-width: 1366px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
.sh-ref-nfh2-left {
-webkit-box-flex: 0;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
border: #eee solid 1px;
}
.sh-ref-nfh2-right {
-webkit-box-flex: 0;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
border: #ccc solid 1px;
img {
width: 100%;
height: auto;
max-width: 100%;
}
}
}
}
最佳答案
使用视口(viewport)单位，例如宽度使用vw，高度使用vh px 和 % 因为它将帮助您使您的网页/网站具有响应能力。
它肯定会起作用，但如果它没有在评论中让我知道，我会尽力帮助你。
关于html - 如何在 CSS flex 或 grid 中使单个图像响应并具有图像文本列？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63061628/