CODEWITHSUNDEEP
jquerycss
yoyoyo
yoyoyo

Reputation: 29

Unwanted image resizing

I need to display thumbnails 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>

it works OK:

correct image

30px + border + padding = 38px.

Yesterday I downloaded and installed a lightbox called Venobox -

For some reason the same image when I open it in a lightbox, reduces to 22x22px
Together with border and padding it has size 30x30px

incorrect reduced size

How can I prevent resizing of the image?
I want them to stay 30x30px + border + padding and not 30px together with border and padding.

I have checked CSS files but can not understand what cause image resizing.

Upvotes: 1

Views: 244

Answers (2)

hungerstar
hungerstar

Reputation: 21675

VenoBox uses 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.

Below are the CSS selectors that VenoBox uses to set box-sizing. Set it's value to content-box to prevent width and height from including padding and borders.

Include this set of selectors after the original selectors to override the original values.

.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;
}

Upvotes: 1

emrebiberoglu
emrebiberoglu

Reputation: 1

Maybe https://www.w3schools.com/cssref/css3_pr_box-sizing.asp can help to you.

If container has border-box property it makes that problem.

E.

Upvotes: 0

Related Questions