html5图片标签在启动时无法响应
html5图片标签在启动时无法响应
提问于 2018-08-02 03:36:13
我正在尝试用html5 <picture>标签设置不同的图片。我在一个引导网格中设置了2张图片，所以图片会一直响应到断点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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51641082
复制相关文章
相似问题