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

Html – How to crop a div

I need to crop a div to fit the size of an image, and be placed on top of it.
Basically I’m trying to draw a black box on an image I have on a webpage.

Code:

<div class="col-9" style="display: flex; justify-content: center;">
    <div class="itemscenter" style="border-style: solid; border-width: 4px;">
        <img style="width: 85%" src="../Images/fov110.png">
    </div>
</div>

I made a border then tried cutting the div.
I also used a width percent thing.

Tags:

2

Answers


  1. 0

    Just make the outside div smaller and set the image’s width to 100%

    Login or Signup to reply.
  2. 0

    you need to set height of image according to your reqirement.

    <div class="col-9 d-flex justify-content-center">
<div class="itemscenter" style="border-style: solid; border-width: 4px;">
    <img src="../Images/fov110.png">
</div>
</div>

css

.itemscenter img {
    height: 300px;
    width: 400px;
    object-fit: cover;
    object-position: center;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search