How can the image (non-background) introduced by the src attribute of the img tag in HTML be adapted to different resolutions_html/css

How can the image (non-background) introduced by the src attribute of the img tag in HTML be adapted to different resolutions_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:22:06

Original

1316 people have browsed it

HTML images

I browsed the forums and Baidu for a day... all I saw were operations on background images. There was nothing about ordinary images.
Please help the experts. How can I do this? Let the image imported by img tag src see the size of the image at different resolutions without changing the proportion.

Reply to the discussion (solution)

You can consider getting it The current computer resolution. Then set the width and height of img.

You can consider getting the resolution of your current computer. Then set the width and height of img.

Should I set the width and height of img to specific pixel values or percentages? What should I set based on?

It is best to set pixels. Because the % of height will not take effect. You can enlarge or reduce proportionally according to the resolution used by the current user, that is, multiply by 0. to set the width and height of this image. The maximum value in the image in this src cannot exceed (the default size of the image);

Better to set pixels. Because the % of height will not take effect. You can enlarge or reduce proportionally according to the resolution used by the current user, that is, multiply by 0. to set the width and height of this image. The maximum value in the image in this src cannot exceed (the default size of the image);

I can’t log in with the company’s QQ account. In this way, I have to judge many situations based on different resolutions, and then I have to adjust the size of the picture based on the effect of the page?

Just set the width to 100%, and the height will be scaled proportionally

<style type="text/css">  #bodybg {      position: absolute;     width: 100%;     height: 100%;     left: 0px;     top: 0px;     z-index: 0; } #bodybg .stretch {      width:100%;     height:100%; }  </style> <body> <!-- 图片自适屏幕分辨率 --> <div id="bodybg">   <img src=XXXXXX.jpg class="stretch" /> </div> </body>

Copy after login

The writing method on the 5th floor can adaptively shield the resolution. If the height is too high, the writing method on the 6th floor Support the original poster’s request! But there is a small drawback. If the image resolution is not high enough, it will be distorted.
If the requirements are not high. You can use the writing method on the 6th floor to deal with the problem of failure to exceed the image size