Question 316751 in Html Question posted in
Some basic documentation can be found here.

Html – How do i make any image regardless how small or large, resize to fit right inside div?

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

Example of 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.

Tags:

2

Answers


  1. 0

    I suggest setting the general img tag element to

    img {
   display: block;
   max-width: 100%;
   height: auto;
}

    then you can go ahead and use any image and give those their own unique style, but they inherit the style above first, which is you taking advantage of the Cascade in CSS

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search