I'm experimenting with the html5 <picture> tag to set different images. I placed the 2 pictures within a bootstrap grid, allowing them to be responsive until the breakpoint 768px, where the image changes.
However, when I decrease the browser size, I notice that the image is not responsive. Could there be an issue with my bootstrap code?
You can view a demo here.
The formatting of the html code may not look right in the snippet provided. Therefore, here's the code:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 margin_bottom">
<picture>
<source media="(min-width: 650px)" srcset="http://yourwebsite.com/1024.jpg">
<source media="(min-width: 380px)" srcset="http://yourwebsite.com/380.jpg">
<img src="http://yourwebsite.com/1024.jpg" alt=“test” style="width:auto;">
</picture>
<div class="inner-wrapper bottom-left">
<h3>Here is headline 1</h3>
</div>
</div>
</div>
</div>
body {
background-color: #f5f5f5;
}
/* Set width between grid elements */
.small-padding.top {
padding-top:10px;
}
.small-padding.bottom {
padding-bottom:10px;
}
.small-padding.left {
padding-left:5px;
}
.small-padding.right {
padding-right:5px;
}
.margin_bottom {
margin-bottom: 10px;
}
.row [class*="col-"] {
padding-right: 5px;
padding-left: 5px;
}
.row {
margin-left: -5px;
margin-right: -5px;
}
.img-responsive {
height: 100%;
}
/* Position of buttons/text in a single grid element */
.inner-wrapper {
text-align: center;
background: none;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 margin_bottom">
<picture>
<source media="(min-width: 650px)" srcset="http://vouzalis.dk/1024.jpg">
<source media="(min-width: 380px)" srcset="http://vouzalis.dk/380.jpg">
<img src="http://vouzalis.dk/1024.jpg" alt=“test” style="width:auto;">
</picture>
<div class="inner-wrapper bottom-left">
<h3>Here is headline 1</h3>
</div>
</div>
</div>
</div>