Bilder auf Homepage an Smartphone anpassen

[Timak97]

Hallo,

ich habe das Problem, dass ich es einfach nicht hinbekommen, dass die Bilder auf der o.g. Seite sich auf einem Smartphone an die Größe anpassen. Die Größe der Texte und Titelbild etc. passt. Aber die Bilder behalten immer die Originalgröße.

Die Bilder habe ich wie folgt in die Seite eingefügt:

<section class="spalte1">
            <h2>Referenzen</h2>
		
            <img src="img/Cockpit.jpg">
            <img src="img/Sitze.jpg">
            <!--<img src="img/Lederpflege.jpg">-->
            <img src="img/Hundehaar.jpg">
            <img src="img/Lueftung.jpg">
            <img src="img/Tuerpappe.jpg">
            <img src="img/Tuerpfalz.jpg">
            <img src="img/Gitter.jpg">
            <img src="img/Motorraum.jpg">
            <img src="img/Entfettende Tankstutzenreinigung.jpg">

			<p>
			
            <a href="Referenzen.html" title="Referenzen">nach oben</a>
        </section>

Und in der Style.css habe ich die class wie folgt definiert:

@media (min-width: 50em) { 
  main {
    grid-template-columns: repeat(3, 1fr);
 } 
    .spalte1 {
    grid-row:    2 / 3;					
  }

    
	.spalte1 img {
     	width: 180%;
		height: 80%px;
		margin-bottom: 30px;
  } 
  
	.spalte1 img:hover{
     	width: 200%;
		height: 100%px;
		transition: 2s;
	}
	
}