Responsiv design - problem med horisontell vy på telefonen

Permalänk
Medlem

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?

Permalänk
Medlem

Såvitt jag förstår din kod har din bild en okänd storlek by default, som alltså verkar vara alldeles för stor i telefon i horisontellt läge. För skärmar som är max 380px breda (d.v.s. många telefoner i vertikalt läge) (och dessutom max 520px höga av någon anledning – jag hade nog tagit bort det) så får bilden en helt annan storlek (55vw×46vh, vilket förmodligen kommer att förvränga bilden). Telefoner i horisontellt läge är i regel nånstans 480px–812px breda. Du kan antingen lägga till fler @media eller tänka om med stylingen så att bilden aldrig blir för stor, till exempel med img { max-width: 100%; }.

Permalänk
Medlem
Skrivet av lydell:

Såvitt jag förstår din kod har din bild en okänd storlek by default, som alltså verkar vara alldeles för stor i telefon i horisontellt läge. För skärmar som är max 380px breda (d.v.s. många telefoner i vertikalt läge) (och dessutom max 520px höga av någon anledning – jag hade nog tagit bort det) så får bilden en helt annan storlek (55vw×46vh, vilket förmodligen kommer att förvränga bilden). Telefoner i horisontellt läge är i regel nånstans 480px–812px breda. Du kan antingen lägga till fler @media eller tänka om med stylingen så att bilden aldrig blir för stor, till exempel med img { max-width: 100%; }.

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.

Permalänk
Entusiast
Skrivet av md7dani:

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.

Det är förvisso inte helt lätt att förstå sammanhanget (ett screenshot hade varit bra), men jag rekommenderar att du läser @lydells inlägg igen, noggrant. Att ta bort max-height: 520px var bara ett generellt tips, ortogonalt mot det problem du försöker lösa. Däremot förslaget om fler @media bör du prova – du har ju vad jag kan se inte använt någon media query som kan tänkas matcha en telefon i landskapsläge.

Använd för övrigt [code] när du klistrar in kod i forumet.

Permalänk
Medlem

Jag har själv haft problem med vw och kör bara width istället. Vet ej om det hjälper dig i denna situation men kan vara värt att prova iaf.

Permalänk
Medlem
Skrivet av Alling:

Det är förvisso inte helt lätt att förstå sammanhanget (ett screenshot hade varit bra), men jag rekommenderar att du läser @lydells inlägg igen, noggrant. Att ta bort max-height: 520px var bara ett generellt tips, ortogonalt mot det problem du försöker lösa. Däremot förslaget om fler @media bör du prova – du har ju vad jag kan se inte använt någon media query som kan tänkas matcha en telefon i landskapsläge.

Använd för övrigt [code] när du klistrar in kod i forumet.

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.