Issues with image size
flexi2202
Posted messages
3640
Registration date
Status
Membre
Last intervention
-
flexi2202 Posted messages 3640 Registration date Status Membre Last intervention -
flexi2202 Posted messages 3640 Registration date Status Membre Last intervention -
Hello everyone
I always have to tear my hair out with images in Bootstrap
Here is my problem
I’m trying to create the most basic grid with images possible
However, I can't integrate my images with their true dimensions
Here's an example
https://codepen.io/flexi2202/pen/XWMGrqV
The first image is contained in my grid with a style of "w100" so it should be 100%
The second one has been placed outside of the grid
I should mention that it's the same image
And here is the reduced image I get online with the Adobe software I'm using
I don’t understand how, with an image of this size, I can get such large images in my file
I should normally have an image of
Width 107 px
Height 81 px
I always have to tear my hair out with images in Bootstrap
Here is my problem
I’m trying to create the most basic grid with images possible
However, I can't integrate my images with their true dimensions
Here's an example
https://codepen.io/flexi2202/pen/XWMGrqV
The first image is contained in my grid with a style of "w100" so it should be 100%
The second one has been placed outside of the grid
I should mention that it's the same image
And here is the reduced image I get online with the Adobe software I'm using
I don’t understand how, with an image of this size, I can get such large images in my file
I should normally have an image of
Width 107 px
Height 81 px
6 réponses
If I take 5 different images, give them the same height using this online software, and then want to display them in HTML, the heights are not the same.
Hi,
If you apply a width: 100%; in CSS to your image, it will take up the entire width of its container.
If you want your image to be the size of your source file, you normally just need to not specify a width in CSS, or if necessary, specify the default value width: auto; which adapts to the content.
https://jsfiddle.net/eqLa3zc2/
If you apply a width: 100%; in CSS to your image, it will take up the entire width of its container.
If you want your image to be the size of your source file, you normally just need to not specify a width in CSS, or if necessary, specify the default value width: auto; which adapts to the content.
https://jsfiddle.net/eqLa3zc2/
hi
thank you for the response and the file
yes it works with one image
but how do I do if I have for example 3 images of different dimensions
for example
image 1 height of 250 and width of 300
image 2 height of 350 and width of 400
image 3 height of 400 and width of 400
I want all 3 images to have, for example, a height of 250
thank you for the response and the file
yes it works with one image
but how do I do if I have for example 3 images of different dimensions
for example
image 1 height of 250 and width of 300
image 2 height of 350 and width of 400
image 3 height of 400 and width of 400
I want all 3 images to have, for example, a height of 250
Without distorting the images, at least 2 possible solutions depending on how you want to display the images in the Bootstrap grid:
1. Contain the image in the column (contain): the image is not cropped but there will be empty space in the column containing the image depending on the width of the column and the size of the image.
To do this, simply apply the max-height property to the img tags with the maximum height of the images.
2. Cover the image in the column (cover): the image displays across the entire width of the column but if the proportions of the image and the column are different, the image will be cropped to avoid distortion.
For this, the simplest method is to replace the img tag with a div tag and use the CSS background properties to display the image (background-image, background-size, background-position, etc.). We also apply a height using the height property for this div tag, there's no need to set the width since it defaults to taking up the full width of the column.
Example: https://codepen.io/Pitet/pen/zYZbBQg
1. Contain the image in the column (contain): the image is not cropped but there will be empty space in the column containing the image depending on the width of the column and the size of the image.
To do this, simply apply the max-height property to the img tags with the maximum height of the images.
2. Cover the image in the column (cover): the image displays across the entire width of the column but if the proportions of the image and the column are different, the image will be cropped to avoid distortion.
For this, the simplest method is to replace the img tag with a div tag and use the CSS background properties to display the image (background-image, background-size, background-position, etc.). We also apply a height using the height property for this div tag, there's no need to set the width since it defaults to taking up the full width of the column.
Example: https://codepen.io/Pitet/pen/zYZbBQg
"I want the 3 images to have, for example, a height of 250"
Simple answer:
But it's not very responsive = display error (also called bug) in most cases. For that, you need to use a unit other than pixels and avoid trying to have fixed values (like 350 px which doesn't correspond to a screen that is 480px in height).
By the way, why 350px? If you base it on your screen, that implies that all users of your site must have the same screen as you and the same space taken by their browser's navigation bars, the same window size...
In short, it's not good to try to enforce a fixed size. Rethink everything in scalar, that's the great advantage of Bootstrap: it already does that.
Simple answer:
img{ height:350px; } But it's not very responsive = display error (also called bug) in most cases. For that, you need to use a unit other than pixels and avoid trying to have fixed values (like 350 px which doesn't correspond to a screen that is 480px in height).
By the way, why 350px? If you base it on your screen, that implies that all users of your site must have the same screen as you and the same space taken by their browser's navigation bars, the same window size...
In short, it's not good to try to enforce a fixed size. Rethink everything in scalar, that's the great advantage of Bootstrap: it already does that.
Good evening
thank you for the response
and especially for the explanation
I will analyze this when I have a clear head because for now I have another little problem with Bootstrap and responsive design
I'll get back to you later
thank you for the response
and especially for the explanation
I will analyze this when I have a clear head because for now I have another little problem with Bootstrap and responsive design
I'll get back to you later
It's best to think in CSS above all. Bootstrap is an implementation of CSS with JavaScript and predefined classes and templates (the 12-column grid).
So if you think primarily about CSS, you'll find the answer more easily.
Here it is simple: a width of 100% for an image means that the image takes up 100% of the available space (and the height will be proportional to the width if it is not specified within the limits of the available space as well).
The rest is self-evident once you have understood this:
Whether using Bootstrap or not, it's really the CSS property "width" that is being discussed, so:
https://developer.mozilla.org/en/docs/Web/CSS/width
So if you think primarily about CSS, you'll find the answer more easily.
Here it is simple: a width of 100% for an image means that the image takes up 100% of the available space (and the height will be proportional to the width if it is not specified within the limits of the available space as well).
The rest is self-evident once you have understood this:
Whether using Bootstrap or not, it's really the CSS property "width" that is being discussed, so:
https://developer.mozilla.org/en/docs/Web/CSS/width