I'm using Twitter Bootstrap and I have a set of columns which contain some images.
When the user is viewing them below 480px I want to change the height of the images without losing their aspect ratio.
Here's the markup:
<div class="container-fluid">
<div class="row">
<div class="project no-padding col-xs-12">
<a href="#">
<figure>
<img class="img-responsive" src="image.jpg">
</figure>
</a>
</div>
</div>
...
I've tried using this CSS:
#media (max-width: #screen-xs-min) {
.project img { height:200px;}
}
The problem with this is that is stretching the image to that height and it doesn't look good at at all.
Is there any workaround to make this with CSS ? If not, is there any JS plugin which can help me doing this ?
Have you tried the class ".image-responsive"?
<img src="..." class="img-responsive" alt="Responsive image">
From http://getbootstrap.com/css/#images
Related
.nir{
padding-top:170px;
padding-left:100px;
}
<div class="container">
<div class="row">
<div class="col-md-3 nir col-md-offset-1 col-xs-offset-2 ">
<img src="Kiara.png" class="img-rounded " alt="Cinque Terre">
</div>
<div class="col-sm-4 col-sm-offset-0 col-xs-offset-1">
<img src="divyam.png" class="img-rounded" alt="Cinque Terre">
</div>
<div class="col-sm-4">
<img src="onourown.png" class="img-rounded" alt="Cinque Terre">
</div>
</div>
</div>
this is my code where I apply css 'class nir' on a div to get top padding in desktop, but i don't want padding in small screen(mobile). So how can i do this Please suggest me.(I don't want to use media screen)
you can use #media in your .css file for example in your css file add something like this
#media (max-width:600px) {
.nir{
padding-top:0px;
padding-left:0px;
}
}
change max width to whatever screen size you desire, in this example anything less than 600px will have 0 padding
I´m using the bootstrap grid system with full-width and I want to have a section, where I have four img-elements with equal margin and the margin should be responsive. The section is in the center of the page.
I could say for every img-element margin-right: 20px or something like this, but can I get this also responsive?
<div class="row" id="content_services">
<div class="col-md-offset-2 col-md-8">
<section id="services_section">
<img src="pictures/test.jpg" alt="Test" class="img-responsive">
<img src="pictures/test.jpg" alt="Test" class="img-responsive">
<img src="pictures/test.jpg" alt="Test" class="img-responsive">
<img src="pictures/test.jpg" alt="Test" class="img-responsive">
</section>
</div>
</div><!-- END ROW CONTENT_SERVICES -->
The stylesheet:
#services_section{
}
#services_section img{
height: 275px;
width: 275px;
display: inline;
}
if its only ever going to be 4 elements - use a nested column structure. Each image will display across the page in a single row across the screen on medium and large viewports, will display in pairs on small viewports and will stack vertically on small viewports. You will still need to style the images to display in the center of each (either with a text-center class on the parent div as I have done or via css on each img). If you need to alter the number of images - remember that the magic number is 12 - each column can be divided into 12 columns so you can alter the sizings for different numbers of image elements.
Also just note that a section semantically requires a heading (h1 - h6 - which defines its title ) within its structure to be valid html5. Hope this helps, Gavgrif
<div class="row" id="content_services">
<div class="col-md-offset-2 col-md-8 text-center">
<section id="services_section">
<div class="col-md-3 col-sm-6">
<img src="pictures/test.jpg" alt="Test" class="img-responsive">
</div>
<div class="col-md-3 col-sm-6">
<img src="pictures/test.jpg" alt="Test" class="img-responsive">
</div>
<div class="col-md-3 col-sm-6">
<img src="pictures/test.jpg" alt="Test" class="img-responsive">
</div>
<div class="col-md-3 col-sm-6">
<img src="pictures/test.jpg" alt="Test" class="img-responsive">
</div>
</section>
</div>
</div><!-- END ROW CONTENT_SERVICES -->
I'm using Bootstrap 3 and, as you see in the code, i have two images. Both of them have the ".img-responsive" class so i don't know why only the first one is resizing and the second one is always the same size.
HTML :
<div class="container-fluid">
<img src="img/ea.png" class="img-responsive" id="img-center" width="700" height="229">
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 frase">
<p>LOREM IPSUM</p>
</div>
</div>
</div>
<div class="container-fluid">
<a href="#">
<img src="img/arrow.PNG" class="img-responsive" style="margin:0 auto;" width="80px" height="65px">
</a>
</div>
In case you're wondering, the id "img-center" only has "margin:0 auto" and "margin-bottom:45vh;
When you apply the width and height attributes to an element, it will override the width: 100% setting of .img-responsive.
However, the reason that the first image is responsive and the second is not, you did not append px to the end of the sizes for the first image. The browser would not know how to interpret that, so it would revert to the original width: 100%; setting.
<img ... class="img-responsive" ... width="700" height="229">
<img ... class="img-responsive" ... width="80px" height="65px">
To make both images responsive, you have to remove the fixed sizing attributes.
<img src="img/ea.png" class="img-responsive" id="img-center">
<img src="img/arrow.PNG" class="img-responsive" style="margin:0 auto;">
That because you're using different inline-style width and height in the both of them, so try to remove the inline style because is prevent the class img-responsive to be applicable.
First img :
<img src="http://img.freepik.com/free-photo/background-with-white-squares-free-vector_23
-2147501484.jpg?size=338c&ext=jpg" class="img-responsive" id="img-center">
Second img :
<img src="http://img.freepik.com/free-photo/background-with-white-squares-free-vector_23
-2147501484.jpg?size=338c&ext=jpg" class="img-responsive" style="margin:0 auto;" >
Hope this help. Take a look at
Working Fiddle.
I recently asked a question that a is kind of related to this but I still need some help. Now that I have that part done, I would like to know how I can make this images fit the size of the browser within their respective divs. Therefore the page would just be the 3 images side by side, no scroll up or down. I thought that having a "container fluid class would help me in this respect but it hasn't. I don't care about the quality of the images in terms because I will be using very hi-def photos, but if there is anything that I should keep in mind in this respect please feel free to notify me. Here is the code so far:
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<img class="img-responsive" src="http://www.bandanaworld.com/20108.JPG" alt="img">
</div>
<div class="col-md-4">
<img class="img-responsive" src="http://www.wholesaleforeveryone.com/content/images/blank/600/solid_color.gif" alt="img">
</div>
<div class="col-md-4">
<img class="img-responsive" src="http://sdihousing.com/wp-content/uploads/2011/09/Solid-Colors-Spectrum-Blue.png" alt="img">
</div>
</div>
</div>
You can add some classes to your html :
<div class="imageContainer container-fluid">
<div class="row">
<div class="ImageColumn col-md-4">
<img class="img-responsive" src="http://www.bandanaworld.com/20108.JPG" alt="img">
</div>
<div class="ImageColumn col-md-4">
<img class="img-responsive" src="http://www.wholesaleforeveryone.com/content/images/blank/600/solid_color.gif" alt="img">
</div>
<div class="ImageColumn col-md-4">
<img class="img-responsive" src="http://sdihousing.com/wp-content/uploads/2011/09/Solid-Colors-Spectrum-Blue.png" alt="img">
</div>
</div>
And some css:
.imageContainer {
height:100%;
position:fixed;
}
.imageContainer .row, .imageContainer .ImageColumn {
height:100%;
padding:0;
}
.imageContainer .ImageColumn img {
width:100%;
height:100%;
}
here is the Fiddle
But I must warn you the result with real photos can look bad because of image stretch: Example
UPD:
as suggested in comments - you can change class to col-xs-4 so it would behave the same on all devices.
UPD 2:
I added something similar like Ihover square effect 4 but without rotation.
It required quite a change in css transitions.
Here is the example:
Link
I am wondering which is the best way to put spaces in between these 3 images with CSS using Bootstrap 3 RC2 as what I have done at the moment is not auto-resizing the images, even though I have set the width to auto in my #picture id tag. I wish for them to b inline and resize the images accordingly.
Here is my markup:
<div class="container">
<div class="row">
<div class="col-lg-4">
<img src="http://placehold.it/350x250" id="picture" />
</div>
<div class="col-lg-4">
<img src="http://placehold.it/350x250" id="picture" />
</div>
<div class="col-lg-4">
<img src="http://placehold.it/350x250" id="picture" />
</div>
</div>
</div>
CSS:
.container {
max-width:1000px;
background-color:white;
}
body {
background-color:cyan
}
#picture {
width:auto;
/*margin-left:10px; */
/*margin-right:10px; */
}
.col-lg-4 {
margin-left:10px;
margin-right:10px;
}
Check my Fiddle for a clearer view. Is there a better way to go about handling this?
Remove your own CSS for .col-lg-4: these margins may screw up the Bootstrap CSS. Next to that, these columns are only visible when your screen width is bigger than 1200 px.
Add the following classes to your divs: .col-xs-4 .col-sm-4 and .col-md-4, and give images a class="img-responsive" attribute.
It should work now as you wish.
As Harm Wellink mentioned, remove your css. You should only need the following html. Notice the "col-xs-4" and the "img-responsive" class. You do not need col-sm-4, col-md-4, col-lg-4 if you intend to have the 3 columns on all screen sizes.
<div class="container">
<div class="row">
<div class="col-xs-4">
<img src="http://placehold.it/350x250" id="picture1" class="img-responsive" />
</div>
<div class="col-xs-4">
<img src="http://placehold.it/350x250" id="picture2" class="img-responsive" />
</div>
<div class="col-xs-4">
<img src="http://placehold.it/350x250" id="picture3" class="img-responsive" />
</div>
</div>
If I understand your question right, you would like to show these pictures in a horizontal line, with a certain amount of space in between the pictures ?
First of all to get the DIV's in line change the following
.col-lg-4 {
display: inline-block;
}
try to specify a width for your container and row (e.g. 100%) and then your divs holding the pictures. Hope this helps you out?