There is such a html / css code with 2 blocks:

* { margin: 0; padding: 0; } body { width: 100%; height: 100%; } ul { list-style: none; width: 100%; height: 40px; background: #000; } ul li { padding: 11px; float: right; display: inline-block; } ul li>ul { display: none; } ul li a { text-decoration: none; color: #fff; font-weight: bold; } @media screen and (max-width: 600px) { ul li a { display: none; } } .main_content { display: inline; } .html5div { display: block; width: 50%; height: 100%; background: yellow; float: left; } .html5 { padding-top: 25%; padding-bottom: 25%; display: flex; align-items: center; justify-content: center; } .css3div { width: 50%; height: 100vh; float: right; background: blue; display: block; } .css3 { padding-top: 25%; padding-bottom: 25%; width: 100%; display: flex; align-items: center; justify-content: center; } 
 <div class="main_content"> <div class="html5div"> <a href="#"><img class="html5" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png"></a> </div> <div class="css3div"> <a href="#"><img class="css3" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/363px-CSS3_logo_and_wordmark.svg.png"></a> </div> </div>

How to set the same background size and adaptive image size?

  • 2
    what's wrong? what is true? What do you want to get? What did you do for this? what exactly does not work? - kizoso

1 answer 1

 .html5div { max-width: 300px; height: auto; float: left; } .css3div { max-width: 300px; height: auto; float: left; } img { width: 100%; }