I'm just starting to use bootstrap to code a website, but I'm running into issues with some of the images that I put on a particular webpage. I want all four of the images to be the same size, but some of them aren't. Can a change in image resolution change how it is displayed on the webpage??
<div class="row row-offcanvas row-offcanvas-right">
<div class="row placeholders">
<div class="col-xs-6 col-sm-3 placeholder">
<a href="google.com">
<img src="/images/book-photo.jpg"" width="300" height="200" class="img-responsive img-rounded">
<h4>Books</h4>
</a>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img src="/images/sports-photo2.jpg" width="300" height="200" class="img-responsive img-rounded">
<h4>Sports</h4>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img src="/images/concerts-photo.jpg" width="300" height="200" class="img-responsive img-rounded">
<h4>Concerts</h4>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img src="/images/sublease-photo.jpg" width="200" height="200" class="img-responsive img-rounded">
<h4>Subleases</h4>
<span class="text-danger">Coming Soon</span>
</div>
</div>
Example of different image sizes:
If you want them to take up the same amount of space, set those as the background of the divs instead. Background-size:cover will make it take up the whole height/width of the div without stretching the photo. It will just cut off the sides a little to make it stay the same proportion. Background-position:center center will make the photo centered vertically and horizontally in the divs. You would just need to place a set height on the divs for the background to show.
Related
the picture of the website on mobile, and the problem
<div class="row">
<div class="col-md-7 col-xs-12">
<div>
<img class="img-responsive" src="https://www.thedrisco.co.il/octopus/Upload/images/Pages/restor-his%201.jpg" /></div>
<div style="display: inline-flex; padding-top: 45px;">
<img src="https://www.thedrisco.co.il/octopus/Upload/images/Pages/classic2%201%20(6).jpg" style="height: 240px;" /></div>
<div style="padding-right: 67px;">
<img src="https://www.thedrisco.co.il/octopus/Upload/images/Pages/classic2%201%20(5).jpg" style="height: 240px;" /></div>
</div>
</div>
</div>
I have this piece of code.. now, I need the images that are in inline flex to fit in a column instead of next to eachother on mobile, and the images to stretch to the size of the device of course. Any Ideas? I added an image for reference to what I'm talking about. Thanks in Advance!
When working with Bootstrap, it’s easiest to define each row separately, and then divide up each row into different columns based on the device, so you could have your restorer image on its own row and the two classic images in the same row.
<div class="container">
<div class="row justify-content-end mb-3">
<div class="col-12 col-md-9">
<img class="float-right w-100"
src="restor-his%201.jpg" />
</div>
</div>
<div class="row justify-content-end">
<div class="col-12 col-md-7 mb-3 mb-md-0">
<img class="float-right w-100" src="classic2%201%20(6).jpg" />
</div>
<div class="col-12 col-md-5 order-md-first">
<img class="float-right w-100" src="classic2%201%20(5).jpg" />
</div>
</div>
</div>
To get the ratio right between the two classic images, I did reduce the width from 430 to 419px, rather than setting the height to a fixed value.
I'm trying to create a responsive row that, when displayed on an iPad, the 3 images go across the screen like on desktop. Currently they are behaving like they are on mobile and expanding vertically, not horizontally.
The images are the 3 product range images on the website: http://dekatest.neto.com.au/
<div class="container" style="text-align:center;">
<div class="row"><img alt="" src="/assets/images/MEDICAL-RANGE.jpg" style="max-width:100%;" /><img alt="" src="/assets/images/SPROTS-RANGE.jpg" style="max-width:100%;" /><img alt="" src="/assets/images/WELLBEING-RANGE.jpg" style="max-width:100%;" /></div>
</div>
If you are using Bootstrap try something like this
<div class="container text-center">
<div class="row">
<div class="col-sm-4">
<img alt="" src="/assets/images/MEDICAL-RANGE.jpg" />
</div>
<div class="col-sm-4">
<img alt="" src="/assets/images/SPROTS-RANGE.jpg" />
</div>
<div class="col-sm-4">
<img alt="" src="/assets/images/WELLBEING-RANGE.jpg" />
</div>
</div>
</div
and with CSS add the properties and styles to your tags
img { max-width: 100%; }
Note: you should change the value of col-sm-* depending on what you are trying to do.
if you are only using row just because of that you don't need padding between images. So simple is that make separate class for controlling padding of col-sm. You should have to use col-* inside row then it will be work fine.
CSS
.no-p{
padding-left:0px;
paddding-right:0px;
}
HTML
<div class="container text-center">
<div class="row">
<div class="col-xs-4 no-p">
<img class="img-responsive" alt="" src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=500&h=500" />
</div>
<div class="col-xs-4 no-p">
<img class="img-responsive" alt="" src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=500&h=500" />
</div>
<div class="col-xs-4 no-p">
<img class="img-responsive" alt="" src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=500&h=500" />
</div>
</div>
</div>
View on JsFiddle: https://jsfiddle.net/L2y3ybff/
i have a thumbnail gallery made of images like this:
<div class="col-lg-2 col-md-3 col-xs-6 thumb">
<a class="thumbnail" href="#" id="mylink">
<img class="img-responsive" src="http://placehold.it/400x300" alt="">
</a>
</div>
I want to replace some of this images/links by an iframe(the iframe contain the same things: "mylink" and the image inside), i want something like this:
<div class="col-lg-2 col-md-3 col-xs-6 thumb">
<iframe id="myiframe" src="iframe-mylink.html"> </iframe>
</div>
I tried a lot of differents things, "embed-responsive" "embed-responsive-4by3", i tried to change height, width, padding, margin, display...
But nothing works, there is always a problem, it's either cropped, too large or too tiny.
What would you suggest me?
When you tried responsive embed, did you remember to wrap it correctly like this?
<div class="col-lg-2 col-md-3 col-xs-6 thumb">
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" id="myiframe" src="iframe-mylink.html"></iframe>
</div>
</div>
I am using responsive bootstrap design.
I want to arrange images in rows and columns. But images are overlapping on each other and not sure why.
Here is my code
<div class="container">
<div class="item" style="width: 194px;height:422px;float:left">
<img src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
</div>
<div class="item" style="width: 194px;height:422px;float:left">
<img src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
</div>
<div class="item" style="width: 194px;height:422px;float:left">
<img src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
</div>
</div>
Here is link to Fiddle
You need to limit the size of your images with max-width so they will scale with the size of the parent element.
img {max-width:100%;}
I've updated your fiddle: https://jsfiddle.net/pk1pr96n/38/
Why do you not use css?
.item {
float:left;
}
.container {
width:1050px;
}
https://jsfiddle.net/pk1pr96n/37/
you mean this?
ps. needed to increase the container div because of images size.
Your images are 350px wide, but you define the width style as 194px.
You need this.
<div class="container">
<div class="item" style="width: 350px;height:422px;float:left">
<img src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
</div>
<div class="item" style="width: 350px;height:422px;float:left">
<img src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
</div>
<div class="item" style="width: 350px;height:422px;float:left">
<img src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
Having said that, this won't actually be responsive because you're defining the image size and not allowing it to be responsive. If you want responsive images, try something like this:
<img src="..." class="img-responsive" alt="Responsive image">
UPDATE with example:
Depending on how you want the images to lay out on mobile devices, you can put each in its own column (eg. .xs-col-4) like this:
<div class="container">
<div class="row">
<div class="item col-xs-4 col-sm-4 col-md-4 col-lg-4" style=";float:left">
<img class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
</div>
<div class="item col-xs-4 col-sm-4 col-md-4 col-lg-4" style="float:left">
<img class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
</div>
<div class="item col-xs-4 col-sm-4 col-md-4 col-lg-4" style="float:left">
<img class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
</div>
</div>
</div>
This will make it so the three images are always side by side regardless of screen size. If you want them to stack on smaller devices, then you can adjust the col-xs-4 etc until you get the result you need.
In my nested column (col-md-6) I included two rows. Unfortunately the (smaller) pictures in the second row do not horizontally align to the left with the first column and the rest of the whole page content. Is there any different margin in col-md-4 than in col-md-12 or is is there any other reason?
Thank you!
<div class="col-md-6 col-md-height">
<div class="row">
<div class="col-md-12">
<a href="images/e1/expose1.jpg" data-lightbox="roadtrip">
<img src="images/e1/expose1.jpg" class="center-block img-responsive" width="100%">
</a>
blabla
</div>
</div>
<div clas="row">
<div class="col-md-4">
<a href="images/e1/s1.jpg" data-lightbox="roadtrip">
<img src="images/e1/s1.jpg" class="img-responsive">
</a>
</div>
<div class="col-md-4">
<img src="images/e1/s2.jpg" class="img-thumbnail">
</div>
<div class="col-md-4">
<img src="images/e1/s3.jpg" class="img-thumbnail" >
</div>
</div>
</div>
It maybe because of the img-thumbnail class you are using on the last two images.
Try converting them to img-responsive