Adding css to the images should do the trick
max-width: 100%;
https://codepen.io/genesy/pen/YzXGXXb it works here.. same code
EDIT: turned it into grid if you want equal image sizes too
<div class="wrapper">
<div class="panel">
<img class=" " src="https://docplayer.org/docs-images/22/1321497/images/61-0.png">
</div>
<div class="panel">
<img src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1">
</div>
<div class="panel">
<img src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1">
</div>
<div class="panel">
<img src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1">
</div>
</div>
.wrapper {
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
height: 100%;
width: 100%;
}
.panel {
width: 100%;
height: 100%;
}
img {
max-width: 100%;
max-height: 100%;
width:
}
html, body {
height: 100%;
width: 100%:
}
If you are using Bootstrap4 then don’t need to write single line of css code as per your attachment image structure. So follow below html with help of BS4 predefined classes.
Use vh-100 class for viewport height 100%.
Use h-100 class in row to inherit parent height.
Use no-gutters in row class for removing gap.
Use h-50 class for each column height set to 50%.
Use img-fluid mh-100 on image for responsive.
Doc: https://getbootstrap.com/docs/4.3/utilities/sizing/#relative-to-the-parent
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container-fluid px-0 vh-100">
<div class="row no-gutters h-100">
<div class="col-6 h-50">
<img src="https://docplayer.org/docs-images/22/1321497/images/61-0.png" class="img-fluid mh-100">
</div>
<div class="col-6 h-50">
<img src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1" class="img-fluid mh-100">
</div>
<div class="col-6 h-50">
<img src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1" class="img-fluid mh-100">
</div>
<div class="col-6 h-50">
<img src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1" class="img-fluid mh-100">
</div>
</div>
</div>
I’m trying to make a 4 panel screen which would fit the screen of any user who accesses it. The images push everything else out of the div that envolves them. I don’t want it to overflow.
My code:
<div class="d-flex flex-row flex-wrap h-100">
<div class="d-flex" style="flex-basis: 50%;">
<img class=" " src="https://docplayer.org/docs-images/22/1321497/images/61-0.png">
</div>
<div class="d-flex" style="flex-basis: 50%;">
<img src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1">
</div>
<div class="d-flex" style="flex-basis: 50%;">
<img src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1">
</div>
<div class="d-flex" style="flex-basis: 50%;">
<img src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1">
</div>
</div>
How I would like it to look:
edited answer with a sample for you. i’m not sure what “didn’t work” means if you don’t explain more
@GeneSy It doesnt look like his example, it is stretched.
he said he doesnt want the images to overflow, which doesn’t anymore. so if the issue is wanting to have same height accross the images then he should say so @Laif the solution to that is using css grid, or js that defines the height of the panels
@GeneSy I don’t know what to tell you, he drew out an example that shows uniform spacing and it does not look like your code example, therefore it isn’t what he is looking for.
Thanks for the response, you actually literally got the image to display exactly like that. Unfortunately I didn’t want to use pixels as a measure. The problem is solved now though.
