Is There a CSS Selector for an Img Which Has Been Constrained by Max-Width or Max-Height

Is there a CSS selector for an IMG which has been constrained by max-width or max-height?

No, there are no CSS selectors that can query style properties, whether declared or computed, as rendering of DOM elements has no relation to the DOM hierarchy.

max-height, max-width, keep aspect ratio and prevent CLS (Cumulative Layout Shift)

I found a solution which works in all modern browsers:

.logo {
    flex-shrink: 0;
    height: 45px;
    width: 90px;
}

.logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

CSS set max image size for certain area

You can target specific elements using CSS selectors, typically a specific element using id or many elements with similar characteristics using class, however CSS allows for fairly complex rules to be created to allow you to target a single specific or subset of elements.

HTML

<img class='large' src='123.png' />
<img class='small' src='456.png' />
<img class='unique' src='789.png' />

CSS

img {
    width:100%;
    height: auto;
}
.large {
    max-width: 600px;
}
.small {
    max-width: 300px;
}
#unique {
    max-width: 1024px;
}

Getting started with CSS from MDN

more on CSS selectors from MDN

CSS image constraints/resizing

As far as I understand, you try to upload an image and set it a max width. There's some mistakes in your code and some things that can be confusing (e.g. : your sidebar and its image have the same class).

First you need to set a width to your sidebar:

.sidebar  { /* I renamed the container to avoid any misunderstanding */
    width: 30%; /* or whatever */
    max-width: 500px;
}

Then, the image in the sidebar :

    .sidebar .sidebaricon { /* this should be your img */
        max-width: 100%;
        height: auto;
    }

The logic is quite simple : you let the image to fill 100% of its parent's width, so you just have to play with the parent's width.

A lot of CSS frameworks use the same technic to provide a quick way to make all images "responsive", like this :

img {
   max-width: 100%;
   height: auto;
}

Again, this means : all images in the document body should have a maximum width of 100% of its container. I added the automatic height as some old IE doesn't keep the ratio by default.

How do I auto-resize an image to fit a 'div' container?

Do not apply an explicit width or height to the image tag. Instead, give it:

max-width:100%;
max-height:100%;

Also, height: auto; if you want to specify a width only.

Example: http://jsfiddle.net/xwrvxser/1/

img {
    max-width: 100%;
    max-height: 100%;
}

.portrait {
    height: 80px;
    width: 30px;
}

.landscape {
    height: 30px;
    width: 80px;
}

.square {
    height: 75px;
    width: 75px;
}

Portrait Div
<div class="portrait">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Landscape Div
<div class="landscape">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Square Div
<div class="square">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

---

Related Topics