如果观众有智能手机或PC,我需要让图像改变它的大小.这实现了我想要的但是这是一个糟糕的方法,因为加载img 4次并且它是多余的：
<div class="col-md-4 text-center">
<img class="hidden-md hidden-sm hidden-xs" src="~/Content/Images/masinaC.png" width="250" height="250" />
<img class="hidden-lg hidden-sm hidden-xs" src="~/Content/Images/masinaC.png" width="200" height="200" />
<img class="hidden-lg hidden-md hidden-xs" src="~/Content/Images/masinaC.png" width="150" height="150" />
<img class="hidden-lg hidden-md hidden-sm" src="~/Content/Images/masinaC.png" width="100" height="100" />
</div>
它一次只显示一个图像,只有大小不同.没有这个丑陋的标记如何实现它？可能使用CSS,我将图像大小放在HTML中只是为了简单起见.
解决方法
根据您要查找的结果,有多种解决方案.通过调整结果的单元格来尝试JSFiddle的行为.
1.使用宽度百分比
您可以为图像设置百分比宽度,以便根据屏幕大小进行调整.如果百分比大于原始宽度,此解决方案可能会增加图像的大小,例如,如果图像宽度为250px,并且您使用宽度：50％,并且屏幕宽度为600px,则图像将缩放直至其是300px宽.
见JSFiddle.
1.1使用宽度百分比,父宽度固定
如果要使用以前的解决方案但不希望图像缩放大于原始大小,则可以设置具有max-width的父级.
见JSFiddle.
2.使用断点
使用CSS3媒体查询根据屏幕的宽度范围更改图像的大小.
见JSFiddle.
如果您不想使用自定义媒体查询大小,并且您希望坚持使用特定于Bootstrap的断点,那么您的CSS应该是：
/* xs */
img {
width: 100px;
height: auto;
}
/* sm */
@media (min-width: 768px) {
img {
width: 150px;
}
}
/* md */
@media (min-width: 992px) {
img {
width: 200px;
}
}
/* lg */
@media (min-width: 1200px) {
img {
width: 250px;
}
}
请参阅JSFiddle.这些大小记录在here. xs是默认值,因为Bootstrap 3使用mobile-first approach.
