jquery - 不需要的图像大小调整

Question

我需要显示缩略图 30x30px + border + padding

.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

30 像素 + 边框 + 内边距 = 38 像素。

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

出于某种原因，当我在灯箱中打开同一张图片时，它会缩小到 22x22px
连同边框和填充，它的大小为 30x30px

incorrect reduced size

如何防止调整图像大小？
我希望它们保持 30x30px + border + padding 而不是 30px 以及 border 和 padding。

我已经检查了 CSS 文件，但无法理解导致图像大小调整的原因。

Answer 1

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

The width and height properties include the content, the padding and border, but not the margin. This is the box model used by Internet Explorer when the document is in Quirks mode. Note that padding and border will be inside of the box e.g. .box {width: 350px; border: 10px solid black;} leads to a box rendered in the browser of width: 350px. The content box can't be negative and is floored to 0, making it impossible to use border-box to make the element disappear.

Here the dimension is calculated as, width = border + padding + width of the content, and height = border + padding + height of the content.

下面是 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;
}