Как правильно работать с картинками в блоке?

Question

[Chips86]

Скажем так есть два типа картинок которые находятся в блоке это 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%
    }

}

Answer 1

[Алексей Семенов]

Блоку родителю задать правило: overflow: hidden.

.block-top-left {
overflow: hidden;
}

"при масштабировании он дублирует картинку"- Чтобы не дублировал:

.block-top-right {
    background-image: url(http://xn--90abjnufcaafw0c.xn--p1ai/wp-content/uploads/2014/03/company_profile.jpg); 
    color: #fff;
background-repeat: no-repeat;
background-size: cover;
}

Comments

[Chips86]

Спасибо, но это решило только одну проблему.

[Алексей Семенов]

Chips86, Вторая проблема в чем? Если можно скриншот приложить.

[Chips86]

Алексей Семенов, при масштабировании картинка которая назначенная как фон в блоке дублируется.

.block-top-right {
    background-image: url(http://xn--90abjnufcaafw0c.xn--p1ai/wp-content/uploads/2014/03/company_profile.jpg); 
    color: #fff;
}

[Алексей Семенов]

2. Добавить свойство background-repeat: no-repeat блоку с фоном - картинкой.

.block-top-right {
    background-image: url(http://xn--90abjnufcaafw0c.xn--p1ai/wp-content/uploads/2014/03/company_profile.jpg); 
    color: #fff;
background-repeat: no-repeat;
}

[Алексей Семенов]

Chips86, Правильней все таки ещё задать размер фону:
background-size: cover;

.block-top-right {
    background-image: url(http://xn--90abjnufcaafw0c.xn--p1ai/wp-content/uploads/2014/03/company_profile.jpg); 
    color: #fff;
background-repeat: no-repeat;
background-size: cover;
}

, Фон будет масштабироваться под размер блока не нарушая своих пропорций.