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

HTML: image resizing/crop/trim

I have ZERO experience/knowledge so I’m sorry in advance for the dumb question. I have an image that is 14px x 14px and it needs to fit into a space that is also 14px x 14px but the image has a lot of extra space that I don’t need or want. How can I trim/crop the extra space and "expand" the image to fill the 14px?

I have tried all of the object-fit commands (not sure I did those correctly though). This is what I have, without any adjustments to the image:

<img src="https://cdn.gifo.wisestamp.com/s/calendar2/000000/64/0/transparent.png" width="14" height="14" style="vertical-align: -2px; line-height: 1.2; width: 14px; height: 14px;"/>
Tags:

2

Answers


  1. 0

    Your best option is to actually use an image editor and modify the image itself or find one that doesn’t have the gap.

    But if you can’t do those, then another option is setting the image to the background of a div. Then using background position and background size to move around the image until it is the right size in the right position.

    .calendar{
  height:14px;
  width:14px;
  background-image:url('https://cdn.gifo.wisestamp.com/s/calendar2/000000/64/0/transparent.png');
  background-position:52px 22px;
  background-size:30px;
  scale:130%;
}
    <div class="calendar"></div>
    Login or Signup to reply.
  2. 0

    I just tried this css and I think it should do what you’re wanting. You can play with margins a bit if you need to shift the image.

    .box {
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: hidden;
}

.image {
    scale: 125%;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search