html – 在lg,md sm和xs上引导不同的img大小

概述如果观众有智能手机或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 如果观众有智能手机或PC,我需要让图像改变它的大小.这实现了我想要的但是这是一个糟糕的方法,因为加载img 4次并且它是多余的：

<div >    <img  src="~/Content/Images/masinaC.png" wIDth="250" height="250" />    <img  src="~/Content/Images/masinaC.png" wIDth="200" height="200" />    <img  src="~/Content/Images/masinaC.png" wIDth="150" height="150" />    <img  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.

您可以阅读有关媒体查询和响应式CSS here的更多信息.

如果您不想使用自定义媒体查询大小,并且您希望坚持使用特定于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.

总结

以上是内存溢出为你收集整理的html – 在lg,md sm和xs上引导不同的img大小全部内容，希望文章能够帮你解决html – 在lg,md sm和xs上引导不同的img大小所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。