Question

我有一张图片，在css中我添加了一个border-radius。当屏幕调整大小时，图像会一直缩小，如何保持大小？

   #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

静态宽度值

只需使用CREATE OR REPLACE FUNCTION GET_NTH_DEC_RESIDUE(NUMERIC, INTEGER) RETURNS BOOLEAN AS $function$ WITH precalc AS ( SELECT POW(10, $2) AS power ) SELECT $1 * power - FLOOR($1 * power) = 0 FROM precalc; $function$ LANGUAGE SQL;而不是px

中测量的静态宽度值

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

Answer 2

您应该使用px或更好，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;
}

为什么要使用em？ Why em instead of px?

Answer 3

如果您想要完全响应的图像，使用百分比没有任何问题。您可以设置最大宽度：10％，确保图像永远不会超过其父元素的10％。或者最小宽度：10％以确保它永远不会缩小到小于其父元素的10％。

否则，您最好的做法是使用媒体查询来获得您想要的精确结果。希望这有帮助

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*/
 }
}

如何在屏幕缩放时保持图像大小不变？

3 个答案:

静态宽度值