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>
Related
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.
I have the following grid - http://codepen.io/vmpen/pen/GqrXQz where aspect ratios must be preserved, whilst being responsive. With no padding
the grid behaves correctly.
<div class="container">
<div class="row-fluid">
<div class="col-xs-3 grid-sizer"></div>
<div class="text-center feature feature--full col-xs-12">
<div class="img-wrapper"><img class="img-responsive" src="https://placehold.it/1080x270"></div>
</div>
<div class="text-center feature feature--width2 col-md-6 col-sm-12">
<div class="img-wrapper height2"><img class="img-responsive" src="https://placehold.it/540x540"></div>
</div>
<div class="col-md-3 col-sm-6 feature">
<div class="img-wrapper"><img class="img-responsive" src="https://placehold.it/270x270"></div>
</div>
<div class="col-md-3 col-sm-6 feature">
<div class="img-wrapper"><img class="img-responsive" src="https://placehold.it/270x270"></div>
</div>
<div class="col-md-3 col-sm-6 feature">
<div class="img-wrapper"><img class="img-responsive" src="https://placehold.it/270x270"></div>
</div>
<div class="col-md-3 col-sm-6 feature">
<div class="img-wrapper"><img class="img-responsive" src="https://placehold.it/270x270"></div>
</div>
<div class="col-md-3 feature">
<div class="img-wrapper height2"><img class="img-responsive" src="https://placehold.it/270x540"></div>
</div>
<div class="col-md-3 feature">
<div class="img-wrapper"><img class="img-responsive" src="https://placehold.it/270x270"></div>
</div>
<div class="col-md-6 feature feature--width2">
<div class="img-wrapper"><img class="img-responsive" src="https://placehold.it/540x270"></div>
</div>
<div class="col-md-9 feature feature--width3 feature--width3">
<div class="img-wrapper last"><img class="img-responsive" src="https://placehold.it/810x270"></div>
</div>
</div>
</div>
When items are padded the height of images do not compensate for the padding, making the grid misaligned.
I have managed to fix this with setting a fixed height but that breaks the responsiveness of the grid and aspect ratios. Can someone point me to some well established techniques to solve this problem. As a final point I have tried various masonry solutions to no avail. My problem is quite similar to this - https://github.com/metafizzy/isotope/issues/877
I came across this answer - How to use border with Bootstrap
outline: #fff solid 10px;
It provides the same affect for borders around the image but isn't calculated by the browser when rendering containers.
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.
I have found a few similar questions but none of them answer exactly what I am hoping for.
I am building a portfolio site,
I am using bootstrap 3 and would like to have my div box have three images across when on small/medium/large but only two across when on extra-small.
I have the images html housed in div liked this
<div class="row" id="artpieces">
<div class="col-md-12 col-xs-12">
CODE FOR THE IMAGES
</div>
</div>
I have been achieving my goal of three images so far with
#artpieces .col-md-12 img {
width: 33%;
}
I have been trying to do something like
#artpieces .col-xs-12 img {
width : 49.5%;
}
but it doesn't make the switch when it gets small. I feel like I am making a very dumb mistake, but can't catch it. (I have tested the %s using a more brute force way one at a time, and they do show up how I want, but it doesn't work when I try both).
PS: this is my first time building a website and I am learning/practicing HTML and CSS. Most of it has been going smooth, but this is the first real issue I haven't been able to solve.
Why not place each image in a div with the classes col-md-12 col-xs-12?
HTML:
<div class="container">
<div class="row" id="artpieces">
<div class="col-md-12 col-xs-12">
<div class="col-md-4 col-xs-6">
<img src="//placehold.it/300x350" class="img-responsive">
</div>
<div class="col-md-4 col-xs-6">
<img src="//placehold.it/300x350" class="img-responsive">
</div>
<div class="col-md-4 col-xs-6">
<img src="//placehold.it/300x350" class="img-responsive">
</div>
<div class="col-md-4 col-xs-6">
<img src="//placehold.it/300x350" class="img-responsive">
</div>
<div class="col-md-4 col-xs-6">
<img src="//placehold.it/300x350" class="img-responsive">
</div>
<div class="col-md-4 col-xs-6">
<img src="//placehold.it/300x350" class="img-responsive">
</div>
</div>
</div>
</div>
Live Demo: http://www.bootply.com/iy3Js8LV5X
I am using Bootstrap and trying to achieve the following with thumbnails.
I the div #demo reaches its max height then make anything after this height overflow horizontally and enable a scrollbar horizontally. I tried overflow-x:auto and other tricks but the div overflows vertically. Any ideas on how to do this?
<div class="row">
<a class="col-md-6 col-xs-12" href="http://i1.ytimg.com/vi/Tm0FAcMQdzg/mqdefault.jpg">
<div class="thumbnail">
<img src="http://i1.ytimg.com/vi/Tm0FAcMQdzg/mqdefault.jpg" alt="...">
</div>
</a>
<div id="demo" style="overflow-y: auto; max-height: 430px;">
<a class="col-md-4 col-xs-4" href="http://i1.ytimg.com/vi/Tm0FAcMQdzg/mqdefault.jpg">
<div class="thumbnail">
<img src="http://i1.ytimg.com/vi/Tm0FAcMQdzg/mqdefault.jpg" alt="...">
</div>
</a>
.....
</div>
</div>
Have a look here: Create horizontally scrolling List Item view using Bootstrap Columns
And also look this sample: http://jsfiddle.net/V5zWT/10/
<div class="DocumentList">
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">aaa</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">aaa</div>
</div>
</div>