不需要的图像缩放

我需要显示缩略图不需要的图像缩放

.wihi3030 { 
 
    width: 30px; 
 
    height: 30px; 
 
} 
 

 
a.image30 img { 
 
    border: 1px solid #CCC; 
 
    background-color: #fff; 
 
    padding: 3px; 
 
}

<a class="image30" href="#"><img class="wihi3030" src="#" alt="" /></a>

它的工作原理确定：

correct image

30PX +边框+填充= 38px。

昨天我下载并安装一个名为Venobox灯箱 -

出于某种原因，当我在灯箱打开相同的图像，减少了与边框和填充22x22px
一起有大小30x30px

incorrect reduced size

如何防止图像调整大小？
我希望他们留在而不是30px连同边框和填充。

我检查过CSS文件，但无法理解是什么原因导致图像大小调整。

来源

2017-06-22 yoyoyo

也许添加最小宽度：30PX和最小高度：30PX到.wihi3030 – omer

他们可能使用'盒大小：边界盒;'其中填充和边框都包括在宽度的一部分和高度声明。使用'box-sizing：border-box;'如果你告诉一个元素是'300px'宽，它将会是'300px'，有或没有填充和/或边框。 – hungerstar

阅读CSS Box Model的基本工作原理，然后符合'box-sizing'属性。顺便说一下，它甚至可以在灯箱中打开一张30 * 30像素的图片，只有在相同的尺寸下才能看到它...？ – CBroe

VenoBox使用box-sizing: border-box;。

宽度和高度属性包括内容，填充和边框，但不包括边距。这是Internet Explorer在文件处于怪癖模式时使用的盒子模型。请注意，填充和边框将位于框内，例如.box {width：350px; border：10px solid black;}导致在宽度：350px的浏览器中呈现的框。内容框不能为负数，并且被置为0，因此无法使用边框来使元素消失。

此处的尺寸计算方式为：width = border + padding +内容的宽度，height = border + padding +内容的高度。

下面是VenoBox用来设置box-sizing的CSS选择器。将其值设置为content-box以防止宽度和高度包含填充和边框。

将这组选择器包含在原始选择器之后以覆盖原始值。

.vbox-overlay *, 
.vbox-overlay *:before, 
.vbox-overlay *:after { 
    -webkit-backface-visibility: hidden; 
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    box-sizing: content-box; 
}

来源

2017-06-22 13:49:57 hungerstar

也许https://www.w3schools.com/cssref/css3_pr_box-sizing.asp可以帮助你。

如果容器具有边框属性，则会导致该问题。

来源

2017-06-22 13:48:53 emrebiberoglu

不需要的图像缩放

回答

相关问题