Скажем так есть два типа картинок которые находятся в блоке это png и jpg. Так вот png картинка при масштабировании выходит за рамки блока, а jpg назначен как фон и при масштабировании он дублирует картинку. Как это можно исправить?
Тут можно глянуть пример.
<div class="content">
<div class="block-top-left">
<img class="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Logo_Google_2013_Official.svg/750px-Logo_Google_2013_Official.svg.png">
</div>
<div class="block-lower-left"></div>
<div class="block">
<div class="block-top-right"></div>
<div class="block-lower-right"></div>
</div>
</div>
html, body, .content {
height: 100%;
width: 100%;
}
.content {
display: table;
}
.block {
display: table-cell;
height: 100%;
}
.block-top-left, .block-lower-left {
height: 50%;
}
.block-top-left {
background: #fe5c5d;
color: #1c1e22;
}
.block-lower-left {
background: #fff;
color: #1c1e22;
}
.block {
width: 50%;
}
.block-top-right, .block-lower-right {
height: 50%;
}
.block-top-right {
background-image: url(http://xn--90abjnufcaafw0c.xn--p1ai/wp-content/uploads/2014/03/company_profile.jpg);
color: #fff;
}
.block-lower-right {
background: #333;
color: #fff;
}
@media only screen and (max-width: 768px) {
.content, .block {
display: block;
width: 100%
}
.block {
width: 100%
}
}