I'm using bootstrap to design a site and I'm trying to align images horizontally and hiding the overflow.
Here's the div
<div class="timeline-gallery col-md-12" style="display: inline-block;">
<img src="/media/cache/de/0f/de0fca4d8b894f36a82a343cd150fcb9.jpg" class="img-thumbnail">
<img src="/media/cache/93/46/9346e937935238a5781beba426a279a1.jpg" class="img-thumbnail">
<img src="/media/cache/a2/53/a2531798d757427e8d5c625d1dfc34bc.jpg" class="img-thumbnail">
</div>
and the css for the images
.timeline-gallery img {
display: inline-block;
position: relative;
float: left;
margin-right: 5px;
overflow: hidden;
}
They occupy the space I'd like but instead are arranged like below
It's hard to understand what do You want ...
<div class="timeline-gallery col-md-12">
<div class='col-md-4'>
<img src="/media/cache/de/0f/de0fca4d8b894f36a82a343cd150fcb9.jpg" class="img-thumbnail">
</div>
<div class='col-md-4'>
<img src="/media/cache/93/46/9346e937935238a5781beba426a279a1.jpg" class="img-thumbnail">
</div>
<div class='col-md-4'>
<img src="/media/cache/a2/53/a2531798d757427e8d5c625d1dfc34bc.jpg" class="img-thumbnail">
</div>
</div>
Remove style='display:inline-block;' from bootstrap column col-md-12. Then add col-md-4 as image container, and CSS for image:
.timeline-gallery img {
max-width:100%;
height:auto;
margin:0 auto;
}
But I'm not sure what do You want...
Here you go with the solution https://jsfiddle.net/forj72t6/1/
.timeline-gallery img {
display:block;
position: relative;
margin-right: 5px;
overflow: hidden;
margin: 0 auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="coantiner-fluid">
<div class="row">
<div class="timeline-gallery col-md-12">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcST7YDjHjnP5DURcPrZpcFPO6BI6I4kOiqTvNeCy4NRYFbA--5J" class="img-thumbnail">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcST7YDjHjnP5DURcPrZpcFPO6BI6I4kOiqTvNeCy4NRYFbA--5J" class="img-thumbnail">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcST7YDjHjnP5DURcPrZpcFPO6BI6I4kOiqTvNeCy4NRYFbA--5J" class="img-thumbnail">
</div>
</div>
</div>
I guess this is what you are looking for.
Related
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 have this below HTML Code:
<div class="col-sm-12 col-md-12">
<div class="answer-picture col-xs-12" id="bookListDiv">
<div id="loadme" style="display:block; margin:0 auto">
<img src="~/images/loader.gif" />
</div>
</div>
</div>
I tried this and lot more but couldn't align it to center.
apply style text-align:center to div as:
<div class="col-sm-12 col-md-12">
<div class="answer-picture col-xs-12" id="bookListDiv">
<div id="loadme" style="display:block; margin:0 auto;text-align:center">
<img src="~/images/loader.gif"/>
</div>
</div>
</div>
Add only this css to #loadme{text-align:center;}
<div class="col-sm-12 col-md-12">
<div class="answer-picture col-xs-12" id="bookListDiv">
<div id="loadme" style="display:block; text-align:center">
<img src="~/images/loader.gif" />
</div>
</div>
</div>
Do This ..
<div class="col-sm-12 col-md-12">
<div class="answer-picture col-xs-12" id="bookListDiv">
<div id="loadme" class="text-center" style="display:block; margin: 0 auto !important;">
<img src="~/images/loader.gif" />
</div>
</div>
</div>
The DIV containing your IMG should be a display: block;
The image should be a display: inline-block; or its initial state;
By default images or any display: inline-block; objects are much treated like text, so you'll have to assign text-align: center; to your DIV;
Hope this helps you in future.
In css,
#loadme { display:grid; align-items:center;}
Using CSSGrid
I want to have two images centered side by side. I've tried a lot of things but when I'm trying to change the width (because the images are too large) I have some distance and it's not okay. I want the images centered side by side on both desktop and mobile.
<div class="row" style="text-align:center;"">
<div style="display:inline-block;">
<a style="display:inline;" href="#"><img style="display: inline-block; margin-left: auto;margin-right: auto;" class="img-responsive item-wishlist" src="http://www.blindfiveyearold.com/wp-content/uploads/2011/01/homer-simpson-150x150.jpg" /></a>
<p class="text-center" style="font-size:1.2em">TST</p>
</div>
<div style="display:inline-block;">
<a style="display:inline;" href="#"><img style="display: inline-block; margin-left: auto;margin-right: auto;" class="img-responsive item-wishlist" src="http://www.blindfiveyearold.com/wp-content/uploads/2011/01/homer-simpson-150x150.jpg" /></a>
<p class="text-center" style="font-size:1.2em">STS</p>
</div>
</div>
Try something like:
<style type="text/css">
#left{
float:left;
width:20%;
overflow:hidden;
margin-left: 1%;
}
#right{
overflow:hidden;
}
</style>
<div class="row">
<div id="left">
<a style="display:inline;" href="#"><img style="display: inline-block; margin-left: auto;margin-right: auto;" class="img-responsive item-wishlist" src="http://www.blindfiveyearold.com/wp-content/uploads/2011/01/homer-simpson-150x150.jpg" /></a>
<p class="text-center" style="font-size:1.2em">TST</p>
</div>
<div id="right">
<a style="display:inline;" href="#"><img style="display: inline-block; margin-left: auto;margin-right: auto;" class="img-responsive item-wishlist" src="http://www.blindfiveyearold.com/wp-content/uploads/2011/01/homer-simpson-150x150.jpg" /></a>
<p class="text-center" style="font-size:1.2em">STS</p>
</div>
</div>
It worked for me in the past when I had to to something similar...
Hope it will do for you as well
.img_wrapper{
display:flex;
margin:0 auto;
width:300px;
height:300px;
border:thin black solid;
}
.images{
margin: auto;
}
p{
text-align:center;
}
img{
width:125px;
height:125px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="img_wrapper">
<div class="images">
<a href="#">
<img class="img-responsive" src="http://www.hercampus.com/sites/default/files/2013/02/27/topic-1350661050.jpg" >
</a>
<p>
TST
</p>
</div>
<div class="images">
<a href="#">
<img class="img-responsive" src="http://www.hercampus.com/sites/default/files/2013/02/27/topic-1350661050.jpg" >
</a>
<p>
TST
</p>
</div>
</div>
</div>
Is this the same that you are looking for?
Here is JSFiddle
Hope this helps.
I would do that with Flexbox - If you can life with a little bit of missing browser-support (but in my opinion it is useable).
The code for the ".row"-div (give it an extra class if you use Bootstrap) would be in CSS (without vendor prefixes):
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-itmes: center;
}
With that the inner Elements are next to each other as long as they are fitting so and also vertically centered in the element.
Here the main flexbox-guide i use: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I hope my answer was helpful.
Edited Answer
As you are using Bootstrap (please see comments below) You can center the images using the Boostrap column system.
Please see here I have updated the CSS, a new col-no-padding class has been created that you can use anywhere if you wish to as it takes away the guttering in the columns and then some basic link and image styles have been added:
.col-no-padding {
padding-left:0;
padding-right:0;
}
.image-wrapper a {
display: block;
}
.image-wrapper img {
width:100%;
}
And the HTML tidied; utilising Bootstraps column and row structure:
<div class="row">
<div class="col-xs-3 col-xs-offset-3 col-sm-2 col-sm-offset-4 col-no-padding">
<div class="image-wrapper">
<a ref="">
<img src="http://www.blindfiveyearold.com/wp-content/uploads/2011/01/homer-simpson-150x150.jpg" alt="" class="img-responsive" />
</a>
<p class="text-center" style="font-size:1.2em">TST</p>
</div>
</div>
<div class="col-xs-3 col-sm-2 col-no-padding">
<div class="image-wrapper">
<a ref="">
<img src="http://www.blindfiveyearold.com/wp-content/uploads/2011/01/homer-simpson-150x150.jpg" alt="" class="img-responsive" />
</a>
<p class="text-center" style="font-size:1.2em">TST</p>
</div>
</div>
</div>
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'm trying to get some images to scale responsively in their parent container using the Bootstrap img-responsive class, but it's not going well. In this scenario, I want to display between 2 and 4 images in a grid pattern on the screen, and for the images to be responsive inside of their parent div.
The problem is that the images don't shrink with the img-container class.
https://jsfiddle.net/fcLv3750/2/
HTML
<div class="container-fluid">
<div class="row">
<div class="row-inner">
<div class="col-sm-6">
<div class="img-container">
<img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
</div>
</div>
<div class="col-sm-6">
<div class="img-container">
<img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
<div class="row">
<div class="row-inner">
<div class="col-sm-6">
<div class="img-container">
<img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
</div>
</div>
<div class="col-sm-6">
<div class="img-container">
<img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
</div>
CSS
.row-container {
background-color: red;
padding: 5px;
max-height: 50%;
height: auto;
}
.img-container {
padding: 4px;
max-height: 100%;
border: 5px;
border-color: black;
border-style: solid;
}
.col-sm-6 {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.row-inner {
background-color: orange;
height: 50vh; //I want the page contents to resize based on browser window height (no scrolling)
width: auto;
}
NOTE: The following will make the images become responsive, but it throws off the grid by making the img-container the full height of the row, which I prefer not to do. (I do not want the img-container height to be 100%)
https://jsfiddle.net/bm83ts0p/2/
.img-container {
padding: 4px;
height: 100%; //changed from max-height:100%
border: 5px;
border-color: black;
border-style: solid;
}
img{
max-height: 100%
}
A) What is causing the img-responsive class to be ignored?
B) What can I do to make the images responsive, and the img-container div not be 100% height.
EDIT: A key feature is that the content be resized to the browser window with no scrolling, hence the height: 50vh; for each of the 2 rows.
EDIT2: Here is the desired result (which only works when the images are at max-resolution with no scaling. Large images or smaller browser window produce the problems listed above)
I have deleted your wrapper "row-inner" from your code as it causes the clearfix issue. Mostly it is reason.
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<div class="img-container">
<img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
</div>
</div>
<div class="col-sm-6">
<div class="img-container">
<img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="img-container">
<img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
</div>
</div>
<div class="col-sm-6">
<div class="img-container">
<img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
Columns in Boostrap grid immediately follows row. e.g row>col to avoid any kind of clearfix issue. Hope it helps.
JS Fiddle : https://jsfiddle.net/dncwdvkq/