Sizing a high-res image (~8MB) to display entirely in a small div (circular, diameter 100px)

StackOverflow https://stackoverflow.com/questions/21567980

  •  07-10-2022
  •  | 
  •  

Question

First of all, thank you so much for being patient with what I know is a simple question that anybody with more than a couple of weeks' experience could figure out. I've seen folks persevere and be very helpful on here and I hope you're willing to do that with me.

Here is my fiddle: http://jsfiddle.net/65uzf/

Here is one of the places that I searched for answers on here: (Vertically center image thumbnails into fix-sized div) I tried the solutions on there and it didn't work out for me. I've also searched ~4 or 5 others, and been unsuccessful with those, too.

What I want to do is take a large image (what is linked as the background-image for the #ysypic and #tabpic divs) and display a thumbnail version of that image in the confines of the divs that I have set up for it. As is, using the background properties that I have laid out in CSS, only a portion of the image displays inside of the circular divs. Without these properties, the display defaults to an even smaller section of the image [presumably the pi*(50^2) area in the top left] with terrible resolution.

I do not care if the entire image doesn't display inside of the circles (it won't, given the difference in shape), and the overflow not being displayed is fine. But I want to be able to see the figures in the center of each image, and not just a little portion of their heads.

Please inform me if this method of using background-image is not even the best approach, too. I want to be able to do this elsewhere, i.e. taking large versions of images and displaying them small inside of a significantly smaller than their normal resolution.

HTML:

<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
    <div class="container">
        <div class="piccontain">
            <div id="ysypic">
                <a href="www.thejourneytothebest.com/ysyprofile" class="guanyin" style="background-image:url('http://i.imgur.com/lbarYwr.jpg')"></a>
            </div>
        </div>
        <div class="piccontain">
            <div id="tabpic">
            </div>
        </div>
    </div>
</body>
</html>

CSS:

body {
    background-image:url('http://i.imgur.com/KLZAkVC.jpg');
    background-attachment:fixed;
    background-position:center;
    background-size:100% 100%;

}
.container {
    text-align:center;
}
.piccontain {
    width:150px;
    height:200px;
    background-color:white;
    border-radius:10%;
    display:inline-block;
}
#ysypic {
    width:100px;
    height:100px;
    border-radius:100%;
    margin-left:25px;
    background-image:url('http://i.imgur.com/lbarYwr.jpg');
    background-attachment:fixed;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}
#tabpic{
    width:100px;
    height:100px;
    border-radius:100%;
    margin-left:25px;
    background-image:url('http://i.imgur.com/yj4ROnn.jpg');
    background-attachment:fixed;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}
Was it helpful?

Solution

I tried with an image tag and overflow property :

.test{
    width:100px;
    height:100px;
    border-radius:100%;
    margin-left:25px;
    overflow:hidden;
}
.test img{
     width:150px;
    height:200px;
    margin-top:-50px;
    margin-left:-30px;
}

http://jsfiddle.net/t5FkL/

Is that what you are looking for?

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top