html5图片标签无法响应Bootstrap

Question

我正在尝试使用html5<picture>标记设置不同的图片。我在引导程序网格中设置了这两张图片，所以图片会一直响应，直到图片发生变化的断点768px。

当我最小化浏览器屏幕大小时，我可以看到图片没有响应。怎么可能呢？引导程序代码应该正确吗？

这里可以看到一个演示。

html代码在代码段中看起来不太好。因此，我将其张贴在这里：

<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>

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;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
/* Color on text */
.dark-font {
color: #333;
}
.light-font {
color: #fff;
}

/* Set full width on columns */
@media (max-width: 768px) {
.img-responsive { /*EDIT*/
width: 100%;
height: auto;
}
.btn-success {
width: fit-content;
}
/* Here you go */
.height-m {
height: 350px;
}
}
@media (max-width: 991px) {
h3 {
font-size: 1.2em;
}
}

<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>

Answer 1

您使用的boostrap模板确实是正确的，并且确实提供了某种响应性，但image没有指定的width。因此浏览器不会缩放它。

相对于其父级设置width应该可以修复它，例如

width: 100%

Answer 2

将图像宽度设置为100%而不是auto应使其具有响应性。