Photoshop Question posted in
The official user guide can be found here.

Square 500×500 pixels image has transparent background on all sides of about 125 pixels. Any way to crop that using CSS? – Photoshop

I have a PNG 500×500 pixels image with transparent background, sadly the image has quite a lot of transparent space on top/bottom/left/right side so when I use it in my HTML it looks like it has huge margin or padding because of that transparent space.

The actual part of the image I want to use is the center 250×250 pixels, so that leaves 125px empty transparent space on every side. Is it possible to CSS to somehow make it look as if the sides of the image are cropped?

The images are coming from an API so I can’t crop the sides in software like Photoshop.

Here’s an example of an image I’m working with – http://raw.communitydragon.org/pbe/game/assets/loadouts/regalia/crests/prestige/prestige_crest_lvl_200.png

Tags:

2

Answers


  1. 0

    I was able to crop it using it as a background.

    #image-box{
  background-color: #fafafa;
  background-image: url("http://raw.communitydragon.org/pbe/game/assets/loadouts/regalia/crests/prestige/prestige_crest_lvl_200.png");
  height: 300px;
  width: 300px;
  background-repeat: no-repeat;
  background-size: 135%;
  background-position: center center;
} 

img{
  border: 1px solid black;
}
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="image-box">
  </div> 
</body>
</html>

    You can check it here: https://codepen.io/bhanusinghR/pen/jONBOJa

    Login or Signup to reply.
  2. 0

    You could either use a background as it was already suggested, or give the image a container to clip it:

    .clip {
  overflow: hidden;
  width: 160px;
  height: 160px;
}
.clip img {
  margin-top: -48px;
  margin-left: -48px;
}
    <div class="clip">
  <img src="http://raw.communitydragon.org/pbe/game/assets/loadouts/regalia/crests/prestige/prestige_crest_lvl_200.png">
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search