How to work with images in a block?

Question

css

Let's just say there are two types of images that are in the block - png and jpg. So, the png image goes beyond the block when scaled, and the jpg is assigned as a background and when scaled, it duplicates the image. How can this be fixed?
Here you can see an example.

<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

Set the parent block to the rule: overflow: hidden.

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

"when scaling, it duplicates the picture" - To avoid duplicating:

.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;
}