Bootstrap
Replies: 2 comments
-
|
I think the classes for padding and margin The img-fluid class causes the image to be set to max-width: 100%. And so the browser ignores the width/height specifications of the image. |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Adding padding or border to an image is not a good choice because the border and padding size can affect the image size. Please change it as follows. <!DOCTYPE HTML>
<HTML>
<HEAD>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</HEAD>
<BODY>
<DIV CLASS="d-inline-block border border-primary p-2 m-2">
<IMG SRC="https://i.ibb.co/bm4WN1g/bp.png" CLASS="img-fluid" ALT="BP">
</DIV>
<BR>
<DIV CLASS="d-inline-block border border-primary p-2 m-2">
<IMG SRC="https://i.ibb.co/bm4WN1g/bp.png" WIDTH="45" HEIGHT="60" CLASS="img-fluid" ALT="BP">
</DIV>
<BR>
</BODY>
</HTML> |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
In order to reduce content shifting on page loading with several embedded images, many are now advising we go retro and add explicit WIDTH and HEIGHT attributes to IMG tags for responsive images.
The problem when doing this with Bootstrap is that as soon as we introduce any padding or borders to the images, the WIDTH and HEIGHT attributes end up defining maximum size of the image plus the padding/borders, rather than just the image itself, hence shrinking the image to satisfy the WIDTH and HEIGHT attributes.
This does not occur when defining margins - only when introducing padding and borders.
Refer to the screenshot included below
The simple code to test this is below.
Is this a Bootstrap bug, or should I be doing things differently?
Beta Was this translation helpful? Give feedback.
All reactions