I want to display an image in the background in a block. My problem is that this image is distorted (stretched across the width).

I don't need to display the whole image, I want it to take the full width of the block, but it must be centered in height even if the height is hidden.

For example, I want it to look like this :

https://cdn.pixabay.com/photo/2016/11/21/03/56/landscape-1844226_960_720.png

element.style {
    background: url(https://cdn.pixabay.com/photo/2016/11/21/03/56/landscape-1844226_960_720.png);
    background-position: center;
    background-size: cover;
}

I don't know how to apply the same style on an img element. Here is my code :

.node--view-mode-similar .layout {
    position: relative;
    margin-bottom: 0;
    padding: 1rem 1rem 0.2rem 1rem;
    border: 2px solid #ced8dd;
}

enter image description here

.node--view-mode-similar .block-field-blocknodearticlefield-article-image img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    height: 100%;
}

enter image description here

CodePudding user response：

try using this:

object-fit: cover;