Home > Article > Web Front-end > How to display different pictures according to different screen resolutions? _html/css_WEB-ITnose
How to display different pictures according to different screen resolutions? _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:50:002061browse
If the screen width is less than 1400, use picture 1.
If it is larger, use picture 2, and specify the width of the picture to be the width of the screen.
Reply to discussion (solution)
Define window.screen.width and pass it to the background output.
<script> <br> if(window.screen.width<1400){ <br /> document.write("<img src='img1.png' style='width:100%' text-align='center'>"); <br> }else{ <br> document.write("<img src='img2.png' style='width:100%' text-align='center'>"); <br> } <br> </script>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Web page layout issues in HTML and CSS_html/css_WEB-ITnoseNext article：Web page layout issues in HTML and CSS_html/css_WEB-ITnose