Search code examples
htmlcssimage

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>
Solution

  • Let’s start with this image.

    enter image description here

    Now let’s use this as the background of a fixed height header.

    header {
  height: 150px;
  background: url(http://picsum.photos/id/729/1500/1000);
  background-size: cover;
}
    <header></header>

    enter image description here

    All we can see is grey sky. By default, the background is positioned so that its left edge and top edge are aligned with the left and top edges of its containing element ... which in CSS is specified as background-position: 0% 0%. We would instead like to see the central part of the image, so let’s try background-position: 50% 50% (which you can also write as background-position: center center or simply background-position: center).

    header {
  height: 150px;
  background: url(http://picsum.photos/id/729/1500/1000);
  background-size: cover;
  background-position: 50% 50%;
}
    <header></header>

    enter image description here

    That’s pretty close, but we still need to move it down a bit. Let’s try background-position: 50% 67% (the second value is the vertical position).

    header {
  height: 150px;
  background: url(http://picsum.photos/id/729/1500/1000);
  background-size: cover;
  background-position: 50% 67%;
}
    <header></header>

    enter image description here

    Yes! That’s about right.

    Now, what if we want to zoom in on the children next to the hay bale? We can increase the size and tweak the position.

    header {
  height: 150px;
  background: url(http://picsum.photos/id/729/3000/2000);
  background-size: 300%;
  background-position: 23% 70%;
}
    <header></header>

    enter image description here

    Most of this you can also do on <img> elements using object-fit and object-position; you just can’t do the zoom part.