2
Ich habe dieses kleine Stück Code (ein Ausschnitt davon). Das Problem ist, dass die Bilder nicht auf den Bildschirm passen, obwohl ich Medienabfragen verwende. Kann jemand mir zeigen, wie man das repariert, um die Bildschirme zu passen? Das Bild, das ich benutze, ist größer als der Bildschirm, also geht es weit über den Bildschirm und zwingt Leute horizontal zu scrollen, was es nicht sollte - es sollte automatisch zum Bildschirm passen.Responsive Bild passt nicht auf Handy-Bildschirm
Hier ist mein Code:
.portfolio img {
max-width: 100%;
width: 100%;
height: auto !important;
}
@media only screen and (min-width: 1025px)
{
\t #myBackground
\t {
\t \t min-height: 1000px;
\t }
\t
\t #produkter
\t {
\t \t min-height: 1000px;
\t }
\t .portfolio img {
max-width: 440px;
max-height: 440px;
}
\t
}
@media only screen and (max-width: 1024px)
{
\t #myBackground
\t {
\t \t min-height: 800px;
\t }
\t
\t #produkter
\t {
\t \t min-height: 800px;
\t }
\t .portfolio img {
max-width: 300px;
max-height: 300px;
}
\t
\t
}
@media only screen and (max-width: 640px)
{
\t #myBackground
\t {
\t \t min-height: 600px;
\t }
\t
\t #produkter
\t {
\t \t min-height: 600px;
\t }
\t .portfolio img {
max-width: 240px;
max-height: 240px;
}
\t
\t
}
@media only screen and (max-width: 368px)
{
\t #myBackground
\t {
\t \t min-height: 500px;
\t }
\t
\t #produkter
\t {
\t \t min-height: 500px;
\t }
\t .portfolio img {
max-width: 100px;
max-height: 100px;
}
\t
\t
}<head>
<meta name="viewport" content="width=device-width">
</head>
<body>
<img class="portfolio" src="images/bock1.png"/>
</body>
Natürlich funktioniert das super - danke! –