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.
Related
When shrinking the screen, these images are overlapping each other. I have made no changes to the css for container-fluid or row.
<div class="container-fluid bg-grey">
<div class="row center">
<div class="col-sm-4">
<img src="http://www.fpcbp.com/wp-content/gallery/tkGallery/OYIaJ1KK.png" width="425" height="319" />
</div>
<div class="col-sm-4">
<img src="http://www.fpcbp.com/wp-content/gallery/tkGallery/OYIaJ1KK.png" width="425" height="319" />
</div>
<div class="col-sm-4">
<img src="http://www.fpcbp.com/wp-content/gallery/tkGallery/OYIaJ1KK.png" width="425" height="319" />
</div>
</div>
</div>
I would like the images to just stack on top of each other, instead of overlapping.
Thanks
The columns will overlap because the <img> elements have a fixed width value. col-*-* have a set percentage width and as soon as that becomes smaller than the width set on the images, overlapping will occur.
To make images responsive you can remove the width property and use the class .img-responsive so that the <img> doesn't exceed the width of the column. It utilizes max-width: 100%.
<img class="img-responsive" src="..." />
You should defined your columns for narrower screen, e.g. col-xs-12. It means that on screens smaller than 768px each column take all the available space, so they stack.
In your code you have 3 columns in a single row and a single column take 33.33% of available space. What's more, you have declared fixed sized of your images. In order to make them responsive, you could use Bootstrap img-responsive class. Notice though, that you must remove earlier fixed height and width. Otherwise images won't scale.
If any of the two valid answers above and below did not work for you, try to add the css attributes attaching your own class to the images:
.myclass{max-width: 100%; height: auto;}
<div class="container-fluid bg-grey">
<div class="row center">
<div class="col-sm-4 col-md-4 col-xs-12">
<img class="img-responsive" src="http://www.fpcbp.com/wp-content/gallery/tkGallery/OYIaJ1KK.png" width="425" height="319" />
</div>
<div class="col-sm-4 col-md-4 col-xs-12">
<img class="img-responsive" src="http://www.fpcbp.com/wp-content/gallery/tkGallery/OYIaJ1KK.png" width="425" height="319" />
</div>
<div class="col-sm-4 col-md-4 col-xs-12">
<img class="img-responsive" src="http://www.fpcbp.com/wp-content/gallery/tkGallery/OYIaJ1KK.png" width="425" height="319" />
</div>
</div>
</div>
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 trying to align each image to the left and right of the text in the "wrapper2 panel-footer center-block" div. It correctly aligns the left image, but the right image is actually going "under" the div for some reason.
.wrapper2 {
max-width: 800px;
float: none;
margin: 0 auto;
}
<div class="wrapper2 panel-footer center-block">
<div class="pull-left">
<img alt="logo" src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" />
</div>
<p><small>Copyright © All Rights Reserved.</small>
</p>
<div class="pull-right">
<img alt="logo" src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" />
</div>
Any reason for this?
To align divs next to each other in Bootstrap you utilize columns. There are 12 columns in a row, so in the example below I put each element in a 4 wide using the col-xs-4 class.
I also added the img-responsive class to both of the images so they scale down correctly on smaller devices.
<div class="wrapper2 panel-footer">
<div class="col-xs-4">
<div class="pull-left"><img class="img-responsive" alt="logo" src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" /></div>
</div>
<div class="col-xs-4">
<p><small>Copyright © All Rights Reserved.</small></p>
</div>
<div class="col-xs-4">
<div class="pull-right"><img class="img-responsive" alt="logo" src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" /></div>
</div>
</div>
Here's a working fiddle link: https://jsfiddle.net/88ebLj7e/
You can find more information on the Bootstrap grid here: https://getbootstrap.com/examples/grid/
<p> Tag is outside the pull-left class. That's what made it looks "under" the div. When you use pull-left. all should be INSIDE the class.
From your codes, <p><small> belongs to wrapper2 not pull-left or pull-right.
If you need more flexible usage, you can use what James Ives suggest. Otherwise, you should change it into like this:
Add one line in your stylesheet as follows:
<style>
.wrapper2 p{float:left; padding-left:30%;}
</style>
<div class="wrapper2 panel-footer center-block">
<div class="pull-left"><img alt="logo" src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" /></div>
<p><small>Copyright © All Rights Reserved.</small></p>
<div class="pull-right"><img alt="logo" src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" /></div>
</div>
So, what you need now is to decide padding-left value.
Hopes, it helps.
I want the elements to be side by side and not on top of one another.
When I say best way, I want the elements to not overlap when you change the size of the screen.
Here is my HTML:
<div class="container-fluid" style="text-align:center; background-color: #f6f6ff;">
<div class="col-md-offset-1 col-sm-12 col-md-10" style="background-color: #f6f6ff;">
<img src="media/subversion_logo-384x332.png" alt="Subversion" height="150" width="150">
<h1>2</h1>
<img src="media/github.png" alt="GitHub" height="150" width="150">
</div>
</div>
Here is a picture of what it looks like:
Right now you have an h1 separating the two images. Since heading tags are block level elements by default, it's not possible to line up the images side by side with the h1 separating them. However, if you put each image/heading in their own column, they will line up:
<div class="container-fluid" style="text-align:center; background-color: #f6f6ff;">
<div class="row">
<div class="col-xs-6">
<h1>1</h1>
<img src="http://placehold.it/150x150" alt="Subversion" height="150" width="150">
</div>
<div class="col-xs-6">
<h1>2</h1>
<img src="http://placehold.it/150x150" alt="GitHub" height="150" width="150">
</div>
<div class="clearfix"></div>
</div>
</div>
Bootply
Using the Grid system to scale up to 12 columns, as described here
<div class="row">
<div class="col-md-4">
<img src="media/subversion_logo-384x332.png" alt="Subversion" height="150" width="150">
</div>
<div class="col-md-4">
<h1>2</h1</div>
<div class="col-md-4">
<img src="media/github.png" alt="GitHub" height="150" width="150
</div>
You can change the size of the columns by increasing/decreasing col-md-4
If you want two elements to be side by side, you can use "row" and "col" from the bootstrap grid.
For example, this is how to code 2 images:
<div class="row">
<div class="col-lg-6">
<img src="media/subversion_logo-384x332.png" alt="GitHub" height="150" width="150">
</div>
<div class="col-lg-6">
<img src="media/subversion_logo-384x332.png" alt="GitHub" height="150" width="150">
</div>
</div
The bootstrap answer is the best. I had the same requirement before, only difference being that it was not acceptable to have the content in the different columns visually spread apart too much on large screens. In that case, you would use the original html and use css
.container-fluid div > * {
margin: 0 auto;
display: inline;
}
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