如何在 CSS flex 或 grid 中使單個圖像響應並具有圖像文本列？
[英]How do I make a single image responsive in CSS flex or grid and have image-text columns?
問題描述
這應該很容易......但由於某種原因，我無法解決這個問題。 我想有兩列彼此相鄰。 左欄是文字，右欄是圖片。 另外，我想使用 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%;
}
}
}
}
1 個解決方案
解決方案1
1 已采納 2020-07-23 19:22:07
使用視口單位（如vw表示寬度， vh表示高度）而不是px和% ，因為它可以幫助您使您的網頁/網站具有響應性。
它肯定會起作用，但如果它沒有在評論中讓我知道，我會盡力幫助你。
如何使圖像網格響應？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.