I'm trying to make an image gallery with different images and different sizes. I have included a link to an image to explain what I want. I have made a row with 4 divs which each contains an image. The images have a width and an height. But my images have different sizes. I.e. 600X500. I'm using Bootstrap.
How can I get the images to fill the whole div (400 X 400) and still be responsive?
I have tried to give the image a fixed height and width, but then the images aren't responsive anymore.
<div class="row">
<div class="square col-xs-6 col-md-3">
<div>
<img src="" class="image-responsive">
</div>
</div>
<div class="square col-xs-6 col-md-3">
<div>
<img src="" class="image-responsive">
</div>
</div>
<div class="square col-xs-6 col-md-3">
<div>
<img src="" class="image-responsive">
</div>
</div>
<div class="square col-xs-6 col-md-3">
<div>
<img src="" class="image-responsive">
</div>
</div>
CSS
.square {min-width: 400px; min-height: 400px;}
This is what im trying to make, some sort of image gallery
You can do this:
.square > div > img {
min-width: 400px;
min-height: 400px;
max-width: 100%;
max-height: 100%;
}
Which will force it to decrease as the device's screen becomes smaller.
Try
.square {width:100%; height:auto;}
The image will always be scaled to fit inside the div element.
Related
I have created a 3 column grid which contains some text and an image in between using Bootstrap 4 for the grid system.
I've noticed that although my image has a img-fluid class assigned the image overflows outside the div.
Can anyone explain the reason for this?
HTML
<div class="row">
<div class="col blue-bg-outter">
<div class="col blue-bg" style="height: 300px;">
<!-- start of content -->
<div class="row">
<div class="col">
<h2> Some line</h2>
</div>
<div class="col img-col">
<img src="https://purepng.com/public/uploads/large/51508089516arw4tqfangou1wmvwzihlw7hxnzjujpulweq1otwrsdcsaxc5kvmu1crkpcyfxezyx4dmcvkbgg5w7oc1sioxib4j044tjwbfcyu.png" alt="" class="img-fluid">
</div>
<div class="col">
<h2> Another line</h2>
</div>
</div>
</div>
</div>
</div>
CSS
.img-fluid {
max-height: 100vh;
}
.blue-bg-outter {
padding: 60px;
}
.blue-bg {
background: #3ad7f7;
}
Might be easier to see on an actual page, please view the CodePen.
Because you have set a height on a parent div to 300px, if you remove height it works. Or you can set the height of img-fluid to 300px as #august suggested:
<div class="col blue-bg">
https://codepen.io/anon/pen/oJKvLp
Or you can keep the height and stop the image overflowing like this:
.blue-bg
{
overflow: hidden;
}
It's an know issue that "with fluidly sized images, before the images load, the image containers initially appear collapsed."
I've fixed the issue for banner image and product images adding div and using this css hack:
height: 0;
overflow: hidden;
padding-bottom: 66.6%;
position: relative;
But can't understand how to fix it for awards icons block.
Firstly image containers initially appear collapsed, than it's loading one big icon, than 2nd, than resize them - would like it to know correct sizes before hand so it will look smooth to the eye.
Here is the screen recording of the issue
Here is pen for award icons block > https://codepen.io/anon/pen/borJXK
HTML
<div class="awards-memberships-container" data-modal="#awards-memberships-modal">
<div class="awards-memberships">
<div class="item">
<img src="http://via.placeholder.com/188x132"/>
</div>
<div class="item">
<img src="http://via.placeholder.com/146x146"/>
</div>
<div class="item">
<img src="http://via.placeholder.com/204x133"/>
</div>
</div>
</div>
CSS
img{vertical-align:bottom;}
body section img{max-width:100%;height:auto;}
.awards-memberships-container{background:#FFF;border-bottom:1px solid #ccc;cursor:pointer;}
.awards-memberships{display:flex;padding:5px 15px;}
.awards-memberships .item{padding:0px 10px;}
Try this and tell me how it goes.
body section img {max-width:100%;height:auto;}
.awards-memberships-container {background:#FFF;border-bottom:1px solid #ccc;cursor:pointer;}
.awards-memberships {display:flex;justify-content:center;align-items:center;padding:5px 15px;}
.awards-memberships .item {padding:0px 10px;}
.awards-memberships .item img {display:block;width:auto;height:auto;max-width:100%;}
<div class="awards-memberships-container" data-modal="#awards-memberships-modal">
<div class="awards-memberships">
<div class="item">
<img src="http://via.placeholder.com/188x132" alt="img1">
</div>
<div class="item">
<img src="http://via.placeholder.com/146x146" alt="img2">
</div>
<div class="item">
<img src="http://via.placeholder.com/204x133" alt="img3">
</div>
</div>
</div>
I'm trying to use Bootstrap grid system with rows each has 4 column contains image, but the image size is big and it gets over its container, so I set image position: absolute and div position: relative but it still doesn't work. Is there any way to make the image fit the div container with container's size?
.sec5row {
border: 1px solid red;
position: relative;
}
.filter {
position: absolute;
}
<div class="container">
<div class="row">
<div class="col-md-3 sec5row">
<img class="filter" src="https://placehold.it/40" alt="f1">
</div>
<div class="col-md-3 sec5row">
<img class="filter" src="https://placehold.it/40" alt="f1">
</div>
<div class="col-md-3 sec5row">
<img class="filter" src="https://placehold.it/40" alt="f1">
</div>
<div class="col-md-3 sec5row">
<img class="filter" src="https://placehold.it/40" alt="f1">
</div>
</div>
<div>
You can use the below code to fit image inside the responsive div
.filter {
width:100%;/*To occupy image full width of the container and also fit inside the container*/
max-width:100%/*To fit inside the container alone with natural size of the image ,Use either of these width or max-width based on your need*/
height:auto;
}
I think the bootstrap class ".img-responsive" solves your problem. So try something like this:
<div class="container">
<div class="row">
<div class="col-md-3">
<img class="img-responsive" src="resources/images/f1.jpg" alt="f1">
</div>
<div class="col-md-3">
<img class="img-responsive" src="resources/images/f2.jpg" alt="f1">
</div>
<div class="col-md-3">
<img class="img-responsive" src="resources/images/f3.jpg" alt="f1">
</div>
<div class="col-md-3">
<img class="img-responsive" src="resources/images/f4.jpg" alt="f1">
</div>
</div>
<div>
It sets the style of your image to "max-width: 100%;" and "height: auto;" which should be exactly what you need. There should be no need for any additional css.
Add css to your code
#img {
width: 100px;//change px size
height: 100px;//change px size
padding-left: 3px;
padding-top: 5px;
}
Just add class="img-responsive" to your img tag...it works fine
The columns are responsive, so the width changes on different screen sizes. The images are all different sizes and aspect ratios. I can't use the .thumbnail class inherent in bootstrap as it has a lot of styling options I don't want.
HTML
<div class="row">
<div class="col-xs-6">
<div class="square"></div>
</div>
<div class="col-xs-6">
<div class="square"></div>
</div>
</div>
CSS
.square {
width: 100%;
padding-bottom: 100%;
background-image: url('your_img');
background-size: cover;
}
This will try to fit as much of the image as possible into the squares. It will possibly omit some of an image if its got an aspect ratio a long way from 1:1, but is probably your best bet.
Here is how you would do just 2 columns
<div class="row show-grid">
<div class="col-md-6"><img src="" alt="" width="100%" height="auto"></div>
<div class="col-md-6"><img src="" alt="" width="100%" height="auto"></div>
</div>
Hope this helps.
More info on grids here: http://getbootstrap.com/css/#grid
I am trying to show two circular images in a row such that both images take 50% of the screen width. Also, I want to make sure that the aspect ratio of the images is maintained if they are scaled up or down. Here's the code that I have used:
<ion-view>
<div class="row" >
<div class="col col-50">
<img src="img/Screen-Language/spanish.png" >
</div>
<div class="col col-50">
<img src="img/Screen-Language/english.png" >
</div>
</div>
</ion-view>
This code leads to overlapping to two images and each image take more than 50% of screen width. How can I fix this issue. Many thanks in advance.
Please try this
<ion-view>
<div class="row" >
<div class="col col-50">
<img src="img/Screen-Language/spanish.png" style="width:100%">
</div>
<div class="col col-50">
<img src="img/Screen-Language/english.png" style="width:100%">
</div>
</div>
</ion-view>
you also can do it this way (css way):
img{
width: 45.7vw;
height: 100px; //some custom height
margin: 2px;
}