Имеется вот такой html/css код с 2 блоками:
* {
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>
Как установить одинаковый размер фона и адаптивный размер изображений?