How do I make a single image responsive in CSS flex or grid and have image-text columns?
Question
This should be easy...but for some reason, I can't get my brains around this. I want to have two columns next to each other. Left column for text and right column for an image. Also, I wanted to use flex, but whether I include the in the HTML or try creating a background image, I just cannot get the img to be responsive.
First, I tried using a grid, because this could get more complex further down the road. However, the img wouldn't be responsive either. I think I am missing an essential concept (even though I set width: 100%, height: auto and max-width: 100%) with responsive images.
In the end, I need something that could look-and-feel like this (I will have text-image and image-text layouts):
What am I doing wrong here? Here's my HTML code:
<!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>
And here's the (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 answers
solution1
1 ACCPTED 2020-07-23 19:22:07
Use Viewport Units like vw for width and vh for height instead of px and % because it will help you make your webpage/website responsive.
It will surely work but if it doesn't let me know in the comments, I will try my best to help you.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.