html/css: use image-set to have a portrait or landscape image as background-image for a div-CodePudding

I'm trying to have a bootstrap 4 carousel use a landscape or portrait image as background for an item depending on the device orientation ...

following simplified code works somehow (with some style in the head) but I cannot find info on image-set so I do not know how to substitute 1x and 2x with landscape and portrait (or if that can be done):

<div >
    <div >
        <div 
             style="background-image: url('landscape.jpg');
                    background-image: -webkit-image-set(
                url('landscape.jpg') 1x,
                url('portrait.jpg') 2x);
                    background-image: -image-set(
                url('landscape.jpg') 1x,
                url('portrait.jpg') 2x)">
                test
            </div>
        </div>
    </div>

did someone get something like this to work, or does someone have a better approach ?

CodePudding user response：

I think, the way you are using the image-set is wrong. To be more precise the image-set is used to specify some diffrent quality images of the same picture.

As a solution i suggest that you use background-size:cover or something like that.

CodePudding user response：

The image-set() function doesn't support changing images based on any media condition. It just supports resolution and image type parameters.

An alternative would be to use regular media queries to change the background image of an element based on the device orientation media feature.

An additional alternative would be using the <picture> element, through which you could specify different media conditions for different images via the media attribute.