Responsiv design - problem med horisontell vy på telefonen

Har suttit och försökt få till det med datorskärm och mobiltelefon men när telefonen är liggandes så blir bilden för stor. Vad är fel och hur kan jag får till det?

<style>
@media only screen and (max-width: 380px) and (max-height:520px) {
img {
width: 55vw;
height: 46vh;
}
}

/* slider css starts here */
.slider {
max-width:500px;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}

</style>

<div class="slider">
<a><img class="mySlides" src="car.jpg" ></a>
</div>

Det ser bra ut på datorskärmen och vertikalt på mobilen, men när jag vänder telefonen horisontellt så blir bilden tok för stor. Hur ändrar jag så att bilden även anpassas i horisontell vy?

tack för tipsen.

med stor så menar jag för hög, såg att det inte var så tydligt.

Så om jag tolkar ditt svar så tar jag bort max-height:520px.

@media only screen and (max-width: 380px) {
img {
max-width: 60%;
max-height: 60%;
}
}

jag har testat det har jag för mig men det har inte fungerat.

Du tänker tex

@media only screen and (max-height: 280px) {
  img {
    width: 100%;
    height: auto;
  }
}

Där max höjd i lanskapsläge är 280px. Min telefon är inte mer än 7 eller 6,5cm bred :(, tänker att höjden blir ca 280px.
Fö tack för tipset, har lagt till fler media queries.