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

Html – Is there a way to resize an image within a circle, without changing the size of the circle?

I’m trying to resize an image within a circle, but I can only change the size of the image and the circle together. I’m assuming this is because of border-radius, but I’m not sure else to do it.

I’m trying to turn this:

enter image description here

Into this:

enter image description here

.Nova {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  overflow: hidden;
  object-position: 0px 0px;
}
<img src="https://i.sstatic.net/xFBKyZNi.png" class="Nova" />
Tags:

2

Answers


  1. 0

    Something like this (but you either need a higher-resolution image, or use SVG so the quality does not drop when zoomed)

    .img-wrapper {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  overflow: hidden;
  object-position: 0px 0px;
}

.Nova {
    position: relative;
    zoom: 2;
    right: 100%;
}
    <div class="img-wrapper">
    <img src="https://i.sstatic.net/xFBKyZNi.png" class="Nova" />
</div>
    Login or Signup to reply.
  2. 0

    You can swap the actual img for a background and position and size that.

    This snippet doubles the size and positions it at the top right. On this image that happens to be good enough to get the head and shoulders in.

    .Nova {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  overflow: hidden;
  background-image: url(https://i.sstatic.net/xFBKyZNi.png);
  background-size: 800px 800px;
  background-position: top right;
  background-repeat: no-repeat;
}
    <img class="Nova" />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search