I have written a code where 4 images are kept inside div side by side in cols.
Below is the code :
<div class="container-fluid">
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3">
<img src="image2.jpg" alt="1" style="width:100%; height:70%;" class="img-responsive" />
</div>
<div class="col-xs-3 col-sm-3 col-md-3">
<img src="image3.jpg" alt="1" style="width:100%; height:70%;" class="img-responsive"/>
</div>
<div class="col-xs-3 col-sm-3 col-md-3">
<img src="image4.jpg" alt="1" style="width:100%; height:70%;" class="img-responsive"/>
</div>
<div class="col-xs-3 col-sm-3 col-md-3">
<img src="image5.jpg" alt="1" style="width:100%; height:70%;" class="img-responsive"/>
</div>
</div>
</div>
This looks like this in full size window :
enter image description here
Now when the window size is minimized, the images looks like this :
enter image description here
I want the image to look the way it looks in the full size even after minimizing without the image getting stretched.
I was able to get the view of above images without it getting stretched when i removed the style: width:100%; height:70%; but then in full sized window the images had blank spaces between each other.
Please help me to get this sorted.
Using
class="img-responsive"
will make your images responsive across devices. In specific, and as per Bootstrap's documentation, it will add
max-width: 100%;
height: auto;
display: block;
to your image elements.
You will need to lose your inline styles
style="width:100%; height:70%;"
as they override everything else (Protip: never use them).
Lastly, if you don't want the blank spaces between images you'll need to force remove the padding for each column. Example:
div.col-xs-3 {
padding: 0;
}
Here is a sample codepen.
#FredRocha hey Fred, I tried using only img-reponsive & losing the inline styles but then the images were looking like this in full screen window size:
Example image
Maybe adding img-responsive class to image will fix the problem.
Related
I am working on a code on the online training I am taking on bootstrap. I am following the exact steps as mentioned in the training but in my result the height of the row I am creating is much higher than it should be.
So the training is on Bootstrap 3, but I am using bootstrap 4 (in case that is important information). I create a row and then two columns each col-md-2 for img and then put images on them. But then the height of the columns are much higher than what it should be.
<div class="container">
<div class="row">
<img src="images/carousel-1.jpg" alt="1" class="col-md-2" />
<img src="images/carousel-2.jpg" alt="2" class="col-md-2" />
</div>
</div>
I want the height of columns to be the size of the images with acceptable padding and margin, and not 3 to 4 times bigger.
Picture of my website:
You can also add class="img-responsive" to each img element. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.
<div class="container">
<div class="row">
<div class="col-md-2">
<img src="images/carousel-1.jpg" alt="1"/>
<img src="images/carousel-1.jpg" alt="1"/>
</div>
</div>
</div>
I am using the bootstrap framework, I am looking to have 3 images as shown in the jsfiddle link below act in a responsive manor when the window size changes/monitor size is too small to display the full sized images. It is important the images remain on the same line (if possible) with no spacing in between.
<img src="http://via.placeholder.com/660x160.png"><img src="http://via.placeholder.com/350x160.png"><img src="http://via.placeholder.com/350x160.png">
Thanks
https://jsfiddle.net/mztyoy7q/
Add a class to the image tags, and don't forget to add the bootstrap!
Just make sure you link the bootstrap, and you can use this free CDN:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
and add the class
class="img-responsive"
to your img tags.
JSFiddle
EDIT: If you want the images on the same line, just create a couple divs.
first, create a parent div,
<div style="display:inline-block; width:100%; height:auto; background-color:#ff0000;">
<img class="img-responsive" src="http://via.placeholder.com/660x160.png">
<img class="img-responsive" src="http://via.placeholder.com/350x160.png">
<img class="img-responsive" src="http://via.placeholder.com/350x160.png">
</div>
This div element will be red with 100% width, and automatically resizing height.
Then add divs between every image with the style float:left; like so:
<div style="display:inline-block; width:100%; height:auto;background-color:#ff0000;">
<div style="float:left;">
<img class="img-responsive" src="http://via.placeholder.com/660x160.png">
</div>
<div style="float:left;">
<img class="img-responsive" src="http://via.placeholder.com/350x160.png">
</div>
<div style="float:left;">
<img class="img-responsive" src="http://via.placeholder.com/350x160.png">
</div>
</div>
Here is the updated JSFiddle If this works, please let me know!
Wrap your images to some grid/columns (e.g. .col-*) and make these images to fill 100% of available space (.img-responsive). This is a clean and elegant way to do it, using just bootstrap:
<div class="row">
<div class="col-xs-4">
<img class="img-responsive" src="http://via.placeholder.com/660x160.png">
</div>
<div class="col-xs-4">
<img class="img-responsive" src="http://via.placeholder.com/350x160.png">
</div>
<div class="col-xs-4">
<img class="img-responsive" src="http://via.placeholder.com/350x160.png">
</div>
</div>
https://jsfiddle.net/tvv89L1j/1/
About removing spaces, the easiest way would be just add your own styles to overwrite padding that bootstrap adds. You need to set padding-left and padding-right to 0 for columns (you can see where that padding comes from in browser inspector, of course).
Haven't asked something here in a long time. I'm trying to build my design portfolio, and since I'm not really a front-end developer I lack a lot of knowledge, but that's why I'm here :)
I've got a container which is a DIV with a given padding. Inside I'll have a grid consisting of fluid-width cards. What would be the best option, or how to proceed towards that, for retaining the card aspect ratio (square) and the gutter between cards when resizing the parent element?
Simply put, I'm looking for something like the attached image:
So no matter the screen size, the gutter and padding will stay the same while the cards change their width to fill up the space.
I'm looking for something as CSS-pure as possible. Where should I look?
Thank you!
I am not sure if i got it right. Nenad's solution seems to be good. But i understood that the cards always stay 3 in a row doesn't matter how big or small the screen is (if this makes sense on every screen is another question now). I made you a fiddle in which you don't have to use pictures, you just have to include a little bit of JQuery Code, it's not much.
var divWidth = $('.square').width();
$('.square').height(divWidth);
Please see my fiddle here: https://jsfiddle.net/ee128fy2/
It would be no problem editing this for smaller screens to not have 3 squares in a row.
Note that the square height will not change when you resize your browser window, it will change on pageload. But anyway, i think no one will resize the window when looking on it on mobile phone or something.
Edit:
If you use pictures instead of jquery, resize will work live when scaling the browser window.
You can do this using boostrap https://jsfiddle.net/2Lzo9vfc/60/
HTML
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 portfolio-item">
<img src="http://placehold.it/350x350" class="img-responsive" alt="">
</div>
<div class="col-sm-4 portfolio-item">
<img src="http://placehold.it/350x350" class="img-responsive" alt="">
</div>
<div class="col-sm-4 portfolio-item">
<img src="http://placehold.it/350x350" class="img-responsive" alt="">
</div>
</div>
<div class="row">
<div class="col-sm-4 portfolio-item">
<img src="http://placehold.it/350x350" class="img-responsive" alt="">
</div>
<div class="col-sm-4 portfolio-item">
<img src="http://placehold.it/350x350" class="img-responsive" alt="">
</div>
<div class="col-sm-4 portfolio-item">
<img src="http://placehold.it/350x350" class="img-responsive" alt="">
</div>
</div>
</div>
CSS
.portfolio-item {
margin: 20px 0;
}
#media(max-width: 768px) {
.portfolio-item {
margin: 20px auto;
width: 100%;
text-align: center;
}
.portfolio-item img{
margin: 0 auto;
}
}
Currently I have an image saved in my project of a map that I would like to include in my solution, my first website. I'm very new to ASP.NET and CSS but have some HTML experience. I am having trouble figuring out how to center and stretch the image appropriately so that regardless of the size of the browser window, the center of the map always remains centered accordingly.
Please advise!
<section>
<div class="container-fluid">
<div class="row">
<img src="/img/additional/map.png"/>
</div>
</div>
</section>
EDIT 1:
I've found on http://getbootstrap.com/css/#images the following information
Responsive images
Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.
To center images which use the .img-responsive class, use .center-block instead of .text-center. See the helper classes section for more details about .center-block usage.
SVG images and IE 8-10
In Internet Explorer 8-10, SVG images with .img-responsive are disproportionately sized. To fix this, add width: 100% \9; where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.
<img src="..." class="img-responsive" alt="Responsive image">
Added class="img-responsive center-block" according to http://getbootstrap.com/css/#images .
<section>
<div class="row">
<img class="img-responsive center-block" src="/img/additional/map.png"/>
</div>
</section>
Just simply add center tag to the image.
<section>
<div class="container-fluid">
<div class="row">
<center>
<img src="/img/additional/map.png"/>
</center>
</div>
</div>
</section>
If are you using bootstrap, you can do it:
<div class="text-center">
<img src="..." class="rounded" alt="...">
</div>
You could also use pure CSS, for example:
.
center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
add class center-block
Ref : here
e.g : <img class="center-block" src="/img/additional/map.png"/>
I have a set of Bootstrap thumbnails on my web page and I have set all the images with class .img-responsive. When I open the page on a mobile browser the thumbnails are appearing too small and I can't even resize them with css.
Here are my thumbnails:
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/thumbnails/traditional.jpg" class="img-rounded img-responsive" alt="...">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/thumbnails/mehndi.jpg" class="img-rounded img-responsive" alt="...">
</a>
</div>
... altogether 12 thumbnails
</div>
I have tried to edit the size of the thumbnails for mobile phone size devices with the following media query:
#media(max-width:767px){
.thumbnail > img {
height:70px;
width:120px;
}
}
However the width doesn't seem to surpass 80px, it seems like I can only set width up to around 80px and anything higher won't do anything.
If I leave the thumbnails like they are without trying the above CSS code they appear too small on mobile devices and I need a way to increase the size of the thumbnails on mobile devices only.
Here is a link to the site:
Change col-xs-6 to col-xs-12
So instead of
<div class="col-xs-6 col-md-3">
You'll have
<div class="col-xs-12 col-md-3">
This will make it so that each thumbnail will take up the full width of the phone, instead of having two across.
I have fixed the problem, I found that I had the below code elsewhere in my CSS that I didn't take notice of. This below media query was what made my images appear so small on mobile devices, I took it out and now images appear fine. Thanks for the help guys.
#media(max-width:767px){
.thumbnail > img {
height:40px;
}
}