CODEWITHSUNDEEP
htmlcssimage
Francis L.
Francis L.

Reputation: 7

Scaling an image proportionally

Let's say I want to target the Sun in this image

http://www.geek.com/wp-content/uploads/2013/08/planets-590x330.jpg

enter image description here

#graphic .image {
    position: absolute; 
    background: url("http://www.geek.com/wp-content/uploads/2013/08/planets-590x330.jpg")
    }
#graphic #sun {
    background-position: 0px 0px;
}
.image {
    width: 50px;
    height: 50px;
}
<div id="graphic">
  <div class="image" id="sun"></div>
  </div>

Let’s say I have a canvas of 500 x 500 I have an asset 50px from the top, 0 from the left To target it, I will do a background-position: 0px 50px right?

Problem is if the image is 100x100, I want it to fit a 50x50, it will just crop half of the image

How can I scale it down proportionally and make it fit inside 50x50 while not being cropped out?

Upvotes: 1

Views: 132

Answers (2)

Nenad Vracar
Nenad Vracar

Reputation: 122047

Try this https://jsfiddle.net/2Lzo9vfc/203/

CSS

.box {
  height: 50px;
  width: 50px;
  background: url('http://www.geek.com/wp-content/uploads/2013/08/planets-590x330.jpg');
  background-position: left top;
  background-size: 250px;
}

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

May be you can use something like this:

.box {
  height: 50px;
  width: 50px;
  background: url('http://www.geek.com/wp-content/uploads/2013/08/planets-590x330.jpg');
  -webkit-background-size: 300px;
  background-size: 300px;
}
<div class="box"></div>

Preview

Keeping the background-size: 300px does the trick.

Upvotes: 1

Related Questions