I want to leave the proportional image inside the div, but I can not. The only "solution" I found so far is to put object-fit: cover, but this style is not compatible with many browsers, so it's not interesting.
Using an image by css also resolves, but in my case it has to be with the same img tag.
Div class is post-thumbnail
Disproportionate
Proportional
Inthese2imagesbelowyoucanbetterunderstandwhatIwant.Cuttingtheimagebyleavingitproportional,withabackground-imageoranobject-fitthisisdoneeasily,butIhavenotfiguredouthowtodowithanimageinhtmlwithouthavingtouseobject-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><divclass="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><spanclass="comments">1</span>
<a class="leia-mais" href="pagina-noticia.php">Leia mais... </a>
</div>
</div>