假设我有以下图片元素:
<picture>
<source srcset="images/something-1100@1x.jpg 1x, images/something-1100@2x.jpg 2x"
media="(min-width: 840px)">
<source srcset="images/something-839@1x.jpg 1x, images/something-839@2x.jpg 2x"
media="(min-width: 480px)">
<img src="images/something-479.jpg"
srcset="images/something-479@1x.jpg 1x, images/something-479@2x.jpg 2x" alt="Something">
</picture>
我看到,当存在中间屏幕宽度时,图像没有响应(例如,它们溢出其父元素),这是很自然的。
立即要做的是应用以下类:
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
所以我问这样的课程到底应该应用在哪里?在一个<source>
?上<img>
?上<picture>
?到处?