Wie Bild in Bootstrap thumbnail quadratisch und reaktionsfähig machen?

Question

Derzeit verwende ich das Bootstrap-Thumbnail. Dieser Code bringt mir genau das, was ich will, aber nur auf der Desktop-Ansicht. Sobald ich die Größe auf Mobilgerät geändert habe, behält es die Größe 358 x 358 wie angegeben bei, sodass es nicht reagiert.

Grundsätzlich möchte ich das Miniaturbild unabhängig von der Bilddatei immer auf den Platz zugeschnitten werden. Wie reagiere ich darauf, aber behalte das gleiche quadratische Bildseitenverhältnis bei? Danke für Ihre Hilfe.

.thumb-img{ 
    object-fit: cover; 
    overflow: hidden; 
    height: 358px; 
    width : 358px; 
}   

und ich bin mit ihm wie dieses

<div class="thumbnail"> 
     <img class="thumb-img" src="66-Yacht-582x357.jpg" alt="yacht" /> 
</div> 

Answer 1

Für ansprechende Größe können Sie vw gegen px verwenden. So:

.thumb-img{ 
    object-fit: cover; 
    overflow: hidden; 
    height: 30vw; 
    width : 30vw; 
}