place images in container but allow truncation

[uworlds]

Hello,

I would like to be able to insert images of varying width and height into a fixed width and height container on a page such that if they are wider or taller than this container then the over-sized part of the image is simply truncated, without any stretching, but also so that the image fills the full container without leaving any white space ... in other words it will drag the image over the border of width to fill height, or over the border of height to fill width.   

In other words, the image is placed in the top left corner but fills the entire space without being stretched.   So enlarging by proportion and allowing one dimension to stretch over, but the smaller dimension goes to 100% only.

This, as opposed to resizing an image to squeeze within a container making the image stretch to fit.

Any help would be greatly appreciated!

Kind regards,
Mike 

[Hema]

is that's what do you mean 

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_background7

[dsonesuk]

I suggest using the object-fit Property https://www.w3schools.com/css/css3_object-fit.asp

div{width:390px;height:280px; overflow:hidden;  /*background-color: #ccc; */}

div img {max-width: 100%;max-height:100%; height:100%;width: 100%; object-fit: cover; }

https://www.w3schools.com/code/tryit.asp?filename=GKO6RUZSK2W5

Edited November 13, 2020 by dsonesuk

[uworlds]

Thank you so much for these suggestions.   Strangely I seem to be having trouble making it work on this W3C template:

https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_hotel&stacked=h

In this particular section (with the 5 images):

<div class="w3-row-padding w3-padding-16 w3-text-white w3-large">
    <div class="w3-half w3-margin-bottom">
      <div class="w3-display-container">
        <img src="/w3images/cinqueterre.jpg" alt="Cinque Terre" style="width:100%">
        <span class="w3-display-bottomleft w3-padding">Cinque Terre</span>
      </div>
    </div>
    <div class="w3-half">
      <div class="w3-row-padding" style="margin:0 -16px">
        <div class="w3-half w3-margin-bottom">
          <div class="w3-display-container">
            <img src="/w3images/newyork2.jpg" alt="New York" style="width:100%">
            <span class="w3-display-bottomleft w3-padding">New York</span>
          </div>
        </div>
        <div class="w3-half w3-margin-bottom">
          <div class="w3-display-container">
            <img src="/w3images/sanfran.jpg" alt="San Francisco" style="width:100%">
            <span class="w3-display-bottomleft w3-padding">San Francisco</span>
          </div>
        </div>
      </div>
      <div class="w3-row-padding" style="margin:0 -16px">
        <div class="w3-half w3-margin-bottom">
          <div class="w3-display-container">
            <img src="/w3images/pisa.jpg" alt="Pisa" style="width:100%">
            <span class="w3-display-bottomleft w3-padding">Pisa</span>
          </div>
        </div>
        <div class="w3-half w3-margin-bottom">
          <div class="w3-display-container">
            <img src="/w3images/paris.jpg" alt="Paris" style="width:100%">
            <span class="w3-display-bottomleft w3-padding">Paris</span>
          </div>
        </div>
      </div>
    </div>
  </div>

 

If all 5 images for the above grid are different sizes, how may I implement the "object-fit:cover"?   I have tried adding it to the style variable in these ways:

style="width:100%; object-fit:cover;"

style="width:100%; height:100%; object-fit:cover;"

style="object-fit:cover;"

... but I can't seem to keep the images to stay within their boxes.

Any advice would be hugely appreciated, thank you!

[dsonesuk]

 

.w3-display-container {
    overflow: hidden;
}

.w3-display-container img {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

But! your img containers are not! fixed width! or height!

[uworlds]

Thank you so much!

Because the CSS is stored externally in an URL, what would you say is be the best way to implement this?   

For example, should I add this CSS code at the top of my HTML page ... or, should I somehow incorporate the same meaning into something like a style variable next to each image?   like:  style="overflow: hidden; max-width: 100%; max-height: 100%; height: 100%; width: 100%; object-fit: cover;"   

(I guess that may be messes the code up quite a bit so perhaps first option better?)

[dsonesuk]

Create a custom.css file. place your css code in there, and place link to that! below w3.css link, is the best option. Anything that exists in w3.ccs will be overridden by the same css in custom.css file, CSS = cascading style sheet.

If you two identical selectors

.selector { color: red;}

.selector { color: blue;}

The last one will always take precedence over previous. The same will happen if these were placed separately in css files, the selector in the css file link below previous will take precedence.

Edited November 17, 2020 by dsonesuk

[uworlds]

Thanks so much dsonesuk!   I believe this allowed me to remove all the specific style variables and consolidate all into custom.css.

It seems on the site I am trying to change that there are tweaks being made to the W3C template that I started with (https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_travel2&stacked=h used to seed https://chinahotel.directory/) where it's adding and subtracting 8 and 16 px for various images on the bottom half of the screen which is preventing me from knowing if the image placements are fully working or if this addition or subtraction of the 8 and 16 px needs to be deleted.   I did a lot of trial and error getting rid of it and changing, but nothing yet seems to have worked. 

If anything blatantly wrong that I have done jumps out I'd be very grateful for your advice.

Best regards

Edited November 20, 2020 by uworlds

[dsonesuk]

The styling using style attribute has higher precedence over css in head tag, the head tag css has higher precedence over external link style sheets. So which ever styling is closer to element has precedence over previous, not including those that use !important.