Leave image with the <img> proportional tag in relation to div

Question

I want to leave the proportional image inside the div, but I’m not getting it. The only "solution" I have found so far is to put Object-fit: cover, but this style is not compatible with many browsers, so it is not interesting.

Using an image by css also solves, but in my case it has to be with the same img tag.

The div class is post-thumbnail

Codepen

Disproportionate

Proportional

In these 2 images below it is possible to understand better what I want. Cutting the image while leaving it proportional, with a background-image or an Object-fit is done easily, but I haven’t figured out how to do with an image in html without having to use Object-fit: cover.

body {
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}

p {
  font-family: Georgia, Arial, Helvetica, "Times New Roman", serif;
  font-size: 14px;
  line-height: 20px;
}

img {
  display: block; 
}

a {
  text-decoration: none;
}

.noticia-index {
  position: relative;
  height: 220px;
  margin-top: 60px;
  width: 880px;
  margin: 0 auto;
}

.noticia-index:after {
  content: "";
  display: block;
  width: 880px;
  height: 1px;
  background: red;
  position: absolute;
  top: 250px;
}

.post-thumbnail {
  width: 40%;
  height: 220px;
  float: left;
  overflow: hidden;
}

.post-thumbnail img {
  height: 100%;
  max-width: 100%;
  border-radius: 50px 0 0 50px;
}

.noticia-index-conteudo {
  width: 60%;
  height: 100%;
  float: right;
  position: relative;
}

.noticia-titulo {
  margin: 0 0 20px 20px;
  font-size: 22px;
  line-height: 30px;
  font-weight: bold;
  color: #000;
}

.noticia-titulo:hover {
  color: red;
  transition: all 0.2s ease-in;
}

.subtitulo-noticia {
  margin-left: 20px;
  font-size: 14px;
  line-height: 22px;
  color: #000;
}

.data-hora-noticia {
  position: absolute;
  top: 180px;
  left: 20px;
  font-size: 14px;
  line-height: 22px;
  color: #000;
}

.icone-comment img {
  position: absolute;
  top: 195px;
  left: 180px;
  width: 18px;
  height: 18px;
}

.comments {
  position: absolute;
  top: 199px;
  left: 201px;
  font-size: 12px;
  color: red;
}

.leia-mais {
  position: absolute;
  top: 190px;
  right: 0;
  font-size: 12px;
  line-height: 30px;
  text-align: center;
  color: #fff;
  width: 100px;
  height: 30px;
  background: red;
  border: 1px solid #000;
  border-radius: 20px 0 0 0;
  font-family: Georgia, Arial, Helvetica, "Times New Roman", serif;
}

.leia-mais:hover {
  background: #000;
  border: 1px solid red;
  transition: all 0.2s ease-in;
}

<div class="noticia-index">
      <a href="pagina-noticia.php"><div class="post-thumbnail"><img src="http://i.imgur.com/7AQ4sy8.jpg">
      </div></a>
      <div class="noticia-index-conteudo"><a href="pagina-noticia.php"><h2 class="noticia-titulo">jnjncjsa jscnjsac jcisjacijsi jdjsan jwijcj jwqjcj</h2></a>
      <h4 class="subtitulo-noticia">kjsfjewjf jfefjiewjew nf fnewjf fjnjfew jfnew fewf feijfiwe...</h4>
      <p class="data-hora-noticia">27/12/2016 (14:04)</p>
      <span class="icone-comment"><img src="http://i.imgur.com/DJhMZHs.png"></span>
      <span class="comments">1</span>
      <a class="leia-mais" href="pagina-noticia.php">Leia mais...       </a>
  </div>
</div>

Answer 1

Hello, good night!

Just add overflow: hidden; to the rule .post-thumbnail. As this rule has already defined a value for height, you can change in .post-thumbnail img the value of height for 100%. With this I believe it will have the desired effect.

Answer 2

background-repeat: no-repeat;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;

If she has a background .