Chips86
@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%
    }

}
  • Вопрос задан
  • 76 просмотров
Решения вопроса 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;
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы