CODEWITHSUNDEEP
htmlcssimage
Kæmpe Klunker
Kæmpe Klunker

Reputation: 865

Aspect fill the image according to the size of image

i have alot of images in a database which has completely different dimensions. i want to make sure that these images have the cut these images so they have same size and still aspect ratio.

so depending on the size i want to do something like this where the div is the wanted size and the image is cut off if it does not fit the size of the div. illustration

enter image description here

code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <style type="text/css">
        body{
            font-family:"Helvetica Neue UltraLight",helvetica,verdana;
            margin-left:0;
            margin-right:0;
            margin-top: 0;
            width   100%;
        }
        section{
            padding-left:5px;
            padding-right:5px;
            font-size:12px;
        }
        h1{
            font-size: 16px;
            padding-left:5px;
        }
        .main_image {
            width: 100%;
            height: 200px;
        }
        .main_image img{

             width: auto;
             height:auto;
        }
    </style>
</head>
<body>

   <div class="main_image">
       <img src="[[[main_image]]]" alt="" />
   </div>
   <h1>[[[title]]]</h1>
   <section>
        <p>[[[full_text]]]</p>
   </section>
</body>
</html>

Upvotes: 1

Views: 291

Answers (2)

Jeff Clarke
Jeff Clarke

Reputation: 1397

Set the image as the background of the container, and set its size to cover:

<div class="main_image" style="background-image:url([[[main_image]]])" title="[[[alt_desc]]]"></div>

.main_image {
  width: 100%;
  height: 200px;
  background-size: cover;
}

This will scale the image proportionally to fill the container and "crop" out the excess.

Upvotes: 2

riddler
riddler

Reputation: 467

Should be relatively straightforward to centre it horizontally and vertically.

    .main_image img{
         width: auto;
         height: auto;
         margin: auto;
    }

Upvotes: 0

Related Questions