I have an image contained in some divs. The image initially, on a widescreen monitor, sits in the central 50% of the viewport. When the browser window is shrunk down to the size of the image I then want the image to shrink with the viewport.
At the moment when the viewport reaches the image, the image just overflows outside the viewport view.
div {
font-size: 15px;
color: #444;
font-family: sans-serif;
padding: 0px;
}
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.container2 {
border: 1px solid black;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
margin: auto;
width: 1000px;
}
.container>div {
background-color: #d3d3d3;
width: 500px;
padding: 10px;
}
.divbox2 {
text-align: left;
width: 1000px;
height: 20px;
}
.divbox3 {
background-color: #9bad65;
text-align: center;
width: 1000px;
}
<div class="container2">
<div class="divbox2"></div>
<div class="container">
<div>Game:</div>
<div>User:</div>
</div>
<div class="divbox2">Big Lego is a feature of this game.</div>
<div class="divbox3">
<img src="tillyimages/images/Terracotta Lego.jpg" loading="lazy" style="max-width: 100%">
</div>
</div>
Here is the image in question
You just need to simplify things a bit.
div {
font-size: 15px;
color: #444;
font-family: sans-serif;
padding: 0px;
}
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.container2 {
border: 1px solid black;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
margin: auto;
max-width: 1000px;
}
.container>div {
background-color: #d3d3d3;
width: 500px;
padding: 10px;
}
.divbox2 {
text-align: left;
width: 100%;
height: 20px;
}
.divbox3 {
background-color: #9bad65;
text-align: center;
width: 100%;
}
<div class="container2">
<div class="divbox2"></div>
<div class="container">
<div>Game:</div>
<div>User:</div>
</div>
<div class="divbox2">Big Lego is a feature of this game.</div>
<div class="divbox3">
<img src="https://www.bb2002.com/tillyimages/images/Terracotta%20Lego.jpg" loading="lazy" style="max-width: 100%">
</div>
</div>