Max-Height and Max-Width with CSS Only

max-height AND max-width with CSS only

Edit 2019:

If you want to keep <img> tags, please look into object-fit css property, support of it across browsers is quite good.

And if you want to keep aspect ratio on width change, try padding-hack.

---

As I understand you have blocks 180x170 px and you want to fill them completely with images. Try to move images to background and use background-size:cover.

Demo http://jsfiddle.net/heuku/1/

<div style="background-image:url(http://placekitten.com/100/200)"></div>
<div style="background-image:url(http://placekitten.com/200/100)"></div>
<div style="background-image:url(http://placekitten.com/200/200)"></div>

div {
  width:180px;
  height:170px;
  background-repeat:no-repeat;
  background-size:cover;
}

Note that this solution not working in IE8 and below.

Div with max-width and max-height and retain proportions (CSS only)

While before and after won't work (easily) but you can still use padding and a background image and it will work exactly the way your current setup works.

img.fancyshadow {
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    padding: 0 10px 10px 0; /* adjust as needed */
    background: url('path/to/your/shadow');
    box-sizing: border-box;
}

I don't have a Mac handy, so I've only tested this in Firefox, Chrome, and IE, can anyone confirm Safari as well?

CSS How do I ask for both max-height and max-width?

If I understand you correclty, what you want to do is ask for both max-height and max-width in the same query string sentence. If that is the case you just need to create this css block:

@media screen and (min-height: 720px) and (min-width: 1920px) {
   /* CSS rules here*/
}

Let me know if that is what you needed.

If you want to ask for one OR the other just just replace and for a comma.

How to set max height/width while using css aspect ratio property?

Here is my own solution: I moved the aspect ratio property to .page, setting max width and max height on .page and setting the img dimensions to 100% width and height.

This is fully responsive, maintains the declared aspect ratio on .page and never exceeds the border of .container, and is absolutely positioned.

The absolute positioning can be removed and display flex added to .container for different positioning, such as being centred in .container

.container {
    position: relative;
    height: 80vh;
    min-width: 80vw;
    border: solid 1px red;
}
.page {
    /*Using absolute positioning to place it center-right of .container*/
    position:absolute;
    top:50%;
    left:50%;
    transform: translateY(-50%) ;
    max-width:50%;
    max-height:100%;
    aspect-ratio: 1 / 1.414; /*A4 aspect ratio*/
    height:auto;
    border:solid 1px blue;
}
img {
    width:100%;
    height:100%;
}

<div class="container">
  <div class="page">
       <img src="https://picsum.photos/id/600/848"> 
  </div>
</div>

Why does max-width and width display a completely different result?

The difference between width: 100% and max-width:100% is that: First,
width define the width of the specific element while max-width define the
maximum size the element is allow to have link

CSS media queries: max-width And max-height

It's missing close and open parenthesis before and after the Logical Operator

@media (max-width: 995px) and (max-height: 700px) { ... }

---

Related Topics