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

Html – How to take only the required part of the image in css

enter image description hereI have an image that should be fit with the container below the sub-1 class according to the below code.

I tried object-fit:cover property but it did not work It shows browser’s own image part.I want to show certain part of the image.how can I do that.

`<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            display: flex;
            border: 1px solid red;
        }

        .col-1{
            display: flex;
            flex-direction: column;
            width: 40%;
        }

        .sub-1{
            border: 1px solid blue;

        }
        .sub-2{
            border: 1px solid blue;
            height: 100%;
        }


    </style>
</head>
<body>
    <div class="container">
        <div class="col-1">
            <div class="sub-1">
                some text
            </div>
            <div class="sub-2">
                <img src="image.png">
                image should be here
            </div>
        </div>

        <div class="col-2">
            <p>
               Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
               Voluptatibus quae 
               hic autem enim sunt deserunt officia architecto dolorum quam.
            </p>
            <a href="#">some link</a>
        </div>

    </div>
    
</body>
</html>
Tags:

2

Answers


  1. 0

    object fit only change image size in an Specified width and height size that’s mean you shoud change image size to what every size you like

    for example if your image is horizontal and you set image width and height to 400px it will changed to cover width and height so it will zoom a little bit

    just change your image size (if your image size covered to container size you should change container size )

    Login or Signup to reply.
  2. 0

    Is this the effect you want?

    .container {
  display: grid;
  grid-template-columns: 2fr 3fr;
  border: 2px solid red;
}

.col-1 {
  display: flex;
  flex-direction: column;
}

.sub-1 {
  border: 2px solid blue;
}

.sub-2 {
  border: 2px solid green;
}

.sub-2 img {
  width: 100%;
  height: 90%;
  object-fit: cover;
}

.col-2 {
  padding: 1em;
}
    <div class="container">
  <div class="col-1">
    <div class="sub-1">
        some text
    </div>
    <div class="sub-2">
        <img src="http://picsum.photos/500">
        image should be here
    </div>
  </div>

  <div class="col-2">
    <p>
       Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
       Voluptatibus quae 
       hic autem enim sunt deserunt officia architecto dolorum quam.
    </p>
    <a href="#">some link</a>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search