Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

它运作正常：

correct image

30px + border + padding = 38px。

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

出于某种原因，当我在灯箱中打开相同的图像时，缩小为22x22px 与边框和填充一起，它的大小为30x30px

incorrect reduced size

如何防止调整图像大小？
我希望他们与边框和填充一起保持30x30px + border + padding而不是30px。

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

Answer 1

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

width和height属性包括内容，填充和边框，但不包括边距。这是文档处于Quirks模式时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;
}

Answer 2

也许described here可以帮到你。

如果容器具有border-box属性，则会出现此问题。

电子。

不需要的图像调整大小

2 个答案: