how do i keep image from resizing upon screen scaling?

Question

I have an image and in css I added a border-radius. When the screen resizes, the image scales all the way down, how do I make it retain the size?

   #PictureUrl > img {
            float: left;
            display: block;
            border-radius: 50%;
            width: 10%;
        }

<span id="PictureUrl"><img src="https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201610281557"/></span>

Answer 1

Static width value

Just use a static width value measured out in px instead of in %

   #PictureUrl > img {
            float: left;
            display: block;
            border-radius: 5px;
            width: 200px;
        }

<span id="PictureUrl"><img src="https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201610281557"/></span>

Answer 2

You should use px or better yet, em.

px:

#PictureUrl > img {
    float: left;
    display: block;
    border-radius: 50%;
    width: 100px;
}

em:

#PictureUrl > img {
    float: left;
    display: block;
    border-radius: 50%;
    width: 100em;
}

Why use em? Why em instead of px?

Answer 3

Nothing is wrong with using percentages if you want a fully responsive image. You can set a max-width: 10% making sure that the image will never grow larger than 10% of it's parent element. Or min-width: 10% to make sure it will never shrink down to less than 10% of the it's parent element.

Otherwise you best practice is to use media queries to get the excact result you want. Hope this helps

img {
 max-width: 10%;
 /*never grow larger than 10%*/
 min-width: 10%; 
 /*never shrink down to less than 10%*/
}

/*media queries for responsive design*/
/*this query sets rules for your elements when screen size is below 768px*/
@media screen and (max-width: 768px){
 img {
  width: 50px; /*What ever fits your project*/
 }
}