View original (French)

Issues with image size

flexi2202 Posted messages 3640 Registration date   Status Member Last intervention   -  
flexi2202 Posted messages 3640 Registration date   Status Member 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

6 answers

  1.
    flexi2202 Posted messages 3640 Registration date   Status Member Last intervention   190
     
    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.
    0
  2. flexi2202 Posted messages 3640 Registration date   Status Member Last intervention   190
     
    I think we should add this 

    img{ height:350px; width:100%; }
    0
  3. Pitet Posted messages 2845 Status Member 530
     
    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/
    0
  4. flexi2202 Posted messages 3640 Registration date   Status Member Last intervention   190
     
    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
    0
    1. Pitet Posted messages 2845 Status Member 530
       
      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
      0
    2. Tcaro
       
      "I want the 3 images to have, for example, a height of 250"

      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.
      0
  6. flexi2202 Posted messages 3640 Registration date   Status Member Last intervention   190
     
    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
    0
    1. Tcaro
       
      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
      0
  7. flexi2202 Posted messages 3640 Registration date   Status Member Last intervention   190
     
    Hello Tcaro

    thank you for this additional explanation
    thanks to you I understand all of this better and I have finally managed to solve the issue with the size of my images
    thank you very much for this help
    0