How can i set div with photos on all available space (now in div .row have big margins) and set one height for all photos in all rows (i have vertical and horizontal photos) and keep responsiveness? Margins in row are the same all the time. Ofc the middle photo will be wider to keep the proportions.
HTML:
<main>
<div class="container">
<div class="row justify-content-sm-center">
<div class="col-lg-4 col-md-6 col-sm-12">
<figure class="description">
<img src="img/projects/home/1.jpg" class="img-fluid img home-photos">
</figure>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<figure class="description">
<img src="img/projects/home/2.jpg" class="img-fluid img home-photos">
</figure>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<figure class="description">
<img src="img/projects/home/3.jpg" class="img-fluid img home-photos">
</figure>
</div>
</div>
</div>
If I'm understanding the question properly this CSS should work.
.row {
display: flex;
justify-content: space-around;
}
.img {
height: 100vh;
width: 45vh; //play with this to get the effect you desire. You may need to target the middle picture individually.
}
Related
I have various images of different dimensions that need to be the same height within a bootstrap grid.
How can I replicate this equal size display in Bootstrap? I have tried "flex 1" on the child items with no joy and "flex: 1 0 0%;" used at source and a few other equal height tutorials on the web with no joy.
I think the solution here is making equal sized rectangle divs, but interested in the way of getting equal height divs with flexbox of all proportions too.
If you control the image files, your best option is probably going to be manually cropping the images into the correct dimensions.
If you don't control the source images (if you're loading from a remote service such as instagram as in the demo), then you'll get the best results by setting an explicit height on your divs and then loading the images as backgrounds with background-size: cover;.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
They basically have a wrapper that has all those rows inside it with a fixed responsive width (media queries they define a fixed width for each screen size) and display:flex/flex-direction:column to those rows stack on top of each other, then those rows are also flexed, with flex-direction:row unlike your code each row has 3 divs those div has flex:1 0 0% so they split the width evenly,and of them each have an img inside each img has a set of defined sizes in the srcset attribute which have equal heights.
So you see the fixed width on the wrapper is divided between the children, and the height is defined by the images.
example below
I splitted your example into two rows each with 3 images, instead of doing the same thing they did with srceset attribute to make the images responsive, i'm just gonna give them a fixed height, for the sake of this explanation.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
max-width: 935px !important;
/* Because in here bootsrtap comes after the editor css*/
}
.container>.row {
display: flex;
flex-direction: row;
}
.container>.row>div {
flex: 1 0 0%;
}
.container>.row>div img {
max-width: 100%;
height: 293px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<div class="container">
<h1 class="my-4 text-center text-lg-left"></h1>
<div id="" class="row text-center text-lg-left">
<div class="col-lg-4 col-sm-6">
<a href="" class="d-block mb-4 h-100" target="_blank">
<img class="img-fluid img-thumbnail" src="https://www.instagram.com/p/BjiCy5uDPHp/media/?size=l" alt="">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="" class="d-block mb-4 h-100" target="_blank">
<img class="img-fluid img-thumbnail" src="https://www.instagram.com/p/Bjhw_0DDAKB/media/?size=l" alt="">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="" class="d-block mb-4 h-100" target="_blank">
<img class="img-fluid img-thumbnail" src="https://www.instagram.com/p/BjhXUb5DVo4/media/?size=l" alt="">
</a>
</div>
</div>
<div id="" class="row text-center text-lg-left">
<div class="col-lg-4 col-sm-6">
<a href="" class="d-block mb-4 h-100" target="_blank">
<img class="img-fluid img-thumbnail" src="https://www.instagram.com/p/BjhF2fDjc6E/media/?size=l" alt="">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="" class="d-block mb-4 h-100" target="_blank">
<img class="img-fluid img-thumbnail" src="https://www.instagram.com/p/Bjgz6KJDw2S/media/?size=l" alt="">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="" class="d-block mb-4 h-100" target="_blank">
<img class="img-fluid img-thumbnail" src="https://www.instagram.com/p/Bjggi3mjTxf/media/?size=l" alt="">
</a>
</div>
</div>
</div>
I am making all the images in my bootstrap grid the same height using an image wrapper and then retaining their native aspect ratios by letting their widths scale independently (see snippet below). Now I want to horizontally center them in their divs to make the layout tidier. I tried to use the image-container class below, but it hasn't worked in the various divs I've applied it to (currently just makes them disappear). Is there some way to horizontally center the images using the wrapper properties perhaps? I'd appreciate any helpful nudges. Thanks!
I'm looking for a successful way to:
keep the images responsively scaled to the same height with different aspect ratios (as seen in the snippet below)
horizontally center the images while retaining their responsive scaling (the point above)
See the snippet below for how the images are responsively scaled to the same height; the commented out image-container divs are one of my unsuccessful attempts to horizontally center the images after the scaling.
.thumbnail img{
max-width: 100%; /* do not stretch the bootstrap column */
}
.img-wrapper {
position: relative;
padding-bottom: 130%;
overflow: hidden;
width: 100%;
}
.img-wrapper img {
position: absolute;
top:0;
left:0;
width:auto;
height:100%;
}
.image-container {
display: flex;
justify-content: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<!--<div class="image-container">-->
<div class="thumbnail">
<div class="img-wrapper">
<img src="http://via.placeholder.com/150x300"/>
</div>
</div>
<!--</div>-->
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<!--<div class="image-container">-->
<div class="thumbnail">
<div class="img-wrapper">
<img src="http://via.placeholder.com/200x350"/>
</div>
</div>
<!--</div>-->
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<!--<div class="image-container">-->
<div class="thumbnail">
<div class="img-wrapper">
<img src="http://via.placeholder.com/150x300"/>
</div>
</div>
<!--</div>-->
</div>
</div>
display: flex in combination with justify-content: center actually does center your images; the problem is that you have absolute positioning inside the flex:
.img-wrapper img {
position: absolute;
}
Simply removing the above code will cause your images to be centered. Note that you'll probably also want to remove top and left, as those will have no effect with the removal of position: absolute:
.thumbnail img {
max-width: 100%;
/* do not stretch the bootstrap column */
}
.img-wrapper {
position: relative;
padding-bottom: 130%;
overflow: hidden;
width: 100%;
}
.img-wrapper img {
/* position: absolute;
top: 0;
left: 0; */
width: auto;
height: 100%;
}
.image-container {
display: flex;
justify-content: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="image-container">
<div class="thumbnail">
<div class="img-wrapper">
<img src="http://placehold.it/150x300" />
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="image-container">
<div class="thumbnail">
<div class="img-wrapper">
<img src="http://placehold.it/200x350" />
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="image-container">
<div class="thumbnail">
<div class="img-wrapper">
<img src="http://placehold.it/150x300" />
</div>
</div>
</div>
</div>
Hope this helps! :)
I am creating an image gallery with 3 rows, each containing 3 images by using the Bootstrap grid system. All of the images have different size. What I am trying to do is make all of the images the same size.
I tried to use the max-height or max-width in my CSS, however it didn't help to make all the images (thumbnails) similar size.
Should I just get rid of the thumbnail class or is there any other solution?
body {
padding-top: 70px;}
.row .flex {
display: inline-flex;
width: 100%;}
img {
width:100%;
min-height:100px;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row match-to-row">
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/eKTUtA74uN0" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/x-tbVqkfQCU" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/cjpGSEkXfwM" alt="">
</div>
</div>
<div class="row match-to-row">
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/63JKK67yGUE" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/YP6lDrlxWYQ" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/NqE8Ral8eCE" alt="">
</div>
</div>
<div class="row flex match-to-row">
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/6oUsyeYXgTg" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/WF2lvywxdMM" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/2FdIvx7sy3U" alt="">
</div>
</div>
</div>
</div>
I think the property you're looking for is object-fit
img {
width: 200px; /* You can set the dimensions to whatever you want */
height: 200px;
object-fit: cover;
}
The object-fit property works similarly to how you would using background-size: cover on a background image to make it fill the page without stretching. This way, you can define a width in a rule that all images will follow to ensure that they are the same size without distorting your picture.
Other values you can use with this property includes:
fill - stretch the image.
contain - preserve the aspect ratio of the image.
cover - Fill the height and width of the box.
none - Keep the original size.
scale-down - compare the differences between none and contain to find the smallest object size.
object-fit | CSS-Tricks
Add the css class img-responsive to every image.
just modify this:
img {
width: 100px; // how much you want
min-height: 100px;
float: left;
margin: 10px;
}
Go to "Inspect Element" in your browser and look for something like:
.thumbnail a>img, .thumbnail>img {
display: block;
width: 100%;
height: auto; }
Change it to:
.thumbnail a>img, .thumbnail>img {
display: block;
width: 100%;
height: 300px; //change as per your requirement }
Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. Top level, is Container and rows and columns are displayed under it.
In Bootstrap, there are 4 classes
xs (for phones - screens less than 768px wide)
sm (for tablets - screens equal to or greater than 768px wide)
md (for small laptops - screens equal to or greater than 992px wide)
lg (for laptops and desktops - screens equal to or greater than 1200px wide)
How to decide on column display:
A page is divided into 12columns grid and width is calculated as
width: percentage((#columns / #grid-columns));
1 column / 12 grid-columns = 8.33% * 1170px = 97.5px
there are no partial pixels so browsers rounds the number.
col-md-2 - Will display 6 images in a row. 2 means 2 columns to display an image
col-sm-12 - Class will help in stacking the image when opened on small devices
.img-center - Is custom class to defined additional properties for the image box
Hope this helps.
.img-center {
text-align: center;
border-radius: 8px;
width: 100px;
background-color: white;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
}
.row {
display: flex;
margin: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="EightImages.css" />
<link rel="images" href="images" />
<link rel="stylesheet" href="css/bootstrap-grid.min.css" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-2">
<img
class="img-fluid img-center"
src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
/>
<p>
Test
</p>
</div>
<div class="col-sm-12 col-md-2">
<img
class="img-fluid img-center"
src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
/>
<p>
Test
</p>
</div>
<div class="col-sm-12 col-md-2">
<img
class="img-fluid img-center"
src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
/>
<p>
Test
</p>
</div>
<div class="col-sm-12 col-md-2">
<img
class="img-fluid img-center"
src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
/>
<p>
Test
</p>
</div>
<div class="col-sm-12 col-md-2">
<img
class="img-fluid img-center"
src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
/>
<p>
Test
</p>
</div>
<div class="col-sm-12 col-md-2">
<img
class="img-fluid img-center"
src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
/>
<p>
Test
</p>
</div>
<div class="col-sm-12 col-md-2">
<img
class="img-fluid img-center"
src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
/>
<p>
Test
</p>
</div>
<div class="col-sm-12 col-md-2">
<img
class="img-fluid img-center"
src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
/>
<p>
Test
</p>
</div>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
</body>
</html>
I am struggling with creating a responsive image gallery. I am using CSS and bootstrap, i tried with tag and as background, I couldnt get it to work.
so, this is what I want to achieve:
https://www.socialprintstudio.com/products/
image grid without image warp or overlapping
When you make your browser smaler, image aspect ratio stays the same, only the size changes and later on you get 2 per row, that I can do with col-lg-4 col-md-6 etc...
I would also prefer if I could do this with img tag as I think it is easier to fade one image to another on hover.
this is my HTML
<div class="item " data-categoryid="2">
<div class="item-image">
<div class="img-bg" style="background: url("http://laravel.dev/images/bon2.jpg"); display: none;"></div>
<div class="img-bg" style="background: url("http://laravel.dev/images/bon.jpg");"></div>
</div>
<div class="item-name">Some name</div>
<div class="item-price">price €</div>
<div class="item-button">
Button.
</div>
</div>
As you said, using bootstrap's .col classes is the way to go here:
Here's a resizable jsfiddle: https://jsfiddle.net/aL1ndzgg/1/
Images, by default, will keep their aspect ratio, unless you specify both the width and the height.
For the hover effect you can have only one of the images for each box set as as position: absolute;; that way, the other image will set the size of the box.
.single-image-container {
margin-bottom: 20px;
position: relative;
}
.single-image-container img {
width: 100%;
}
.blocker {
position: relative;
overflow: hidden;
}
.hover-image {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 125ms ease-in-out;
}
.single-image-container:hover .hover-image {
opacity: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-md-4 single-image-container">
<div class="blocker">
<img src="http://placehold.it/400x400" alt="img">
<img class="hover-image" src="http://placehold.it/400x400/f00" alt="img2">
</div>
</div>
<div class="col-xs-6 col-md-4 single-image-container">
<div class="blocker">
<img src="http://placehold.it/400x400" alt="img">
<img class="hover-image" src="http://placehold.it/400x400/f00" alt="img2">
</div>
</div>
<div class="col-xs-6 col-md-4 single-image-container">
<div class="blocker">
<img src="http://placehold.it/400x400" alt="img">
<img class="hover-image" src="http://placehold.it/400x400/f00" alt="img2">
</div>
</div>
<div class="col-xs-6 col-md-4 single-image-container">
<div class="blocker">
<img src="http://placehold.it/400x400" alt="img">
<img class="hover-image" src="http://placehold.it/400x400/f00" alt="img2">
</div>
</div>
<div class="col-xs-6 col-md-4 single-image-container">
<div class="blocker">
<img src="http://placehold.it/400x400" alt="img">
<img class="hover-image" src="http://placehold.it/400x400/f00" alt="img2">
</div>
</div>
</div>
</div>
To make your images responsive add the following CSS:
.item img {
max-width: 100%;
width: 100%;
height: auto;
}
So as long as the image source is square the image will resize to its bootstrap grid
You can also try the following: CSS Tricks: Responsive Images
I am currently having a problem where the bootstrap img-responsive class isn't working as it should due to me needing the image to be as far right in the div box as possible. I have two identically sized arrows which surrounds titles of my site. When the browser is scaled down to mobile size, the left arrow appears smaller and more distorted than the right counterpart.
Full Sized Title
Phone Sized Title
HTML:
<div class="row">
<div class="col-lg-3"> </div>
<div class="col-xs-3 col-lg-2 arrow-right">
<img class="img-responsive img-right" src="img/arrow-right.png" alt="">
</div>
<div class="col-xs-6 col-lg-2 text-center">
<h2 class="section-heading">RSVP</h2>
</div>
<div class="col-xs-3 col-lg-2 arrow-left">
<img class="img-responsive img-left" src="img/arrow-left.png" alt="">
</div>
<div class="col-lg-3"> </div>
</div>
CSS:
.arrow-right {
padding-top: 12px;
}
.arrow-left {
padding-top: 12px;
padding-left: 0;
}
#media (min-width: 768px) {
.img-right {
display: block;
margin: auto;
margin-left: 34px;
}
.img-left {
margin: auto;
margin-right: 30px;
}
}
My question would be, is there an easier way to get these arrows as close to the titles as possible and have them scale down to phone sized perfectly?
Change the XS and make 4/4/4
<div class="row">
<div class="col-lg-3"> </div>
<div class="col-xs-4 col-lg-2 arrow-right">
<img class="img-responsive img-right" src="img/arrow-right.png" alt="">
</div>
<div class="col-xs-4 col-lg-2 text-center">
<h2 class="section-heading">RSVP</h2>
</div>
<div class="col-xs-4 col-lg-2 arrow-left">
<img class="img-responsive img-left" src="img/arrow-left.png" alt="">
</div>
<div class="col-lg-3"> </div>
</div>
I think the blurry image is due to display: block, for getting the image as close to the text as possible you could consider using ::after or ::before pseudo-elements. Also you could try the following HTML:
<div class="col-xs-3 col-lg-2 arrow-right">
</div>
<div class="col-xs-12 col-lg-6 text-center">
<img class="img-responsive img-right" src="img/arrow-right.png" alt="">
<h2 class="section-heading">RSVP</h2>
<img class="img-responsive img-left" src="img/arrow-left.png" alt="">
</div>
</div>
</div>
Also, could you post a fiddle or http://www.bootply.com/?
EDIT -- (after bootply response)
using a little CSS i got it working (without the use of media queries etc.). The CSS is now a lot less and I hope this is what you are looking for (because the images are as close as possible to the text). Using float: left to the img, h2 and a little padding-top: 24px for the images got it lined up. See bootply:
http://www.bootply.com/2Hp6stSs9B