Issue
Originally what i was trying to do was make any large image fit inside a parent div, and i managed to do that, but now any image large or small, regardless of size that is put inside the div, while it does fit, it now ends up just being extremely small.
My questions would originally have been something like "Is there any way i can make smaller images resize and become larger to fit right into the div. I don't want it to just fit, or fill the div, i want it to sit right on the edges and fringes of the div."
If you can answer that question above then please do it, but theres probably some way to just "make any image regardless how small or large, resize to fit right inside div?" So thats my real question.
I have an image to better explain what im trying to do
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="logo/thefavicon.ico" type="image/x-icon">
<style>
.box{
background-color:rgb(255, 161, 220);
color: rgb(219, 92, 181);
width: 200px;
height: 200px;
padding: 12px;
margin-bottom: 10px;
margin-right: 7px;
text-align: center;
font-family: Arial;
font-size: 15px;
display:inline-block
}
.title{
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.description {
background-color: rgb(0, 0, 255);
width: 200px;
height: 120px;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.description img{
max-width: 54px;
min-width: 54px;
display: block;
margin: auto;
object-fit: cover;
}
</style>
</head>
<body>
<div class="box">
<div>
</div>
<div class="title"> <b>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum at aliquet nunc, eget varius ligula.
Aenean porttitor nibh ac finibus aliquam.
</b>
</div>
<div class="description">
<div id="post_image">
<img src="misc/testimg.png">
</div>
</div>
</div>
</body>
</html>
I also instead tried targeting ".description #post_image" instead of ".description img" but that didnt work. i also tried removing everything except "max-width: 54px" in ".description img{" but that didnt work.
Solution
It looks like the object-fit CSS property is the one that you are looking for.
I have a minimalistic codepen setup here that you can take reference from.
https://codepen.io/Jun-Wen-Soh/pen/oNVLYzL
If you want a fix for your code, I also did it here.
https://codepen.io/Jun-Wen-Soh/pen/eYXzBBa
Answered By - Jun Wen Soh
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.