Wie skaliert man das Bild mit CSS

Question

Ich habe 3 Bilder und wie skaliert man diese Bilder als ich die Größe des Browsers reduzieren. Wie verkleinere ich meine Bilder, wenn ich meinen Browser verkleinere? Ich versuche, diese aber es funktioniert nicht:

HTML

<div class="main"> 
     <div class="submain"> 
     <div class="iner"> 
      <img src="img/sample1.png" alt="" /> 
     </div> 
     <div class="iner1"> 
      <img src="img/sample2.png" alt="" /> 
     </div> 
     <div class="iner2"> 
      <img src="img/sample3.png" alt="" /> 
     </div> 
     </div> 
    </div> 

CSS

.main{ 
    position:relative; 
    height: 500px; 
    width: 1000px; 
    background-color: #111210; 
} 


.iner img{ 
    position: absolute; 
    width: 600px; 
    height: 350px; 
    background-color: #34cb2f; 
    bottom: 0; 

    left:50%; 
    z-index: 5; 
    transform: translateX(-50%); -webkit-transform: translateX(-50%); 
} 

.iner1 img{ 
    position: absolute; 
    width: 600px; 
    height: 270px; 
    background-color: #34cb2f; 
    bottom: 0; 

    right: 5%; 
    transform: translateX(-50%); -webkit-transform: translateX(-50%); 
} 

.iner2 img{ 
    position: absolute; 
    width: 600px; 
    height: 270px; 
    background-color: #34cb2f; 
    bottom: 0; 

    left: 65%; 
    transform: translateX(-50%); -webkit-transform: translateX(-50%); 
} 

.submain{ 
    width: 800px; 
    height: 200px; 
    background-color: rgba(38, 118, 212, 0.51); 
} 

Und das ist für Stufenbild, wenn min-Breite von weniger als 400px:

@media screen and (min-width: 400px) { 
    .submain{ 
    width: 75%; 
    } 
} 

Aber diese Medienregel funktioniert nicht, vielleicht mache ich etwas falsch, bitte hilf mir zu verstehen. Vielen Dank!

Answer 1

Die Medienabfrage sollte funktionieren (I Ghess), aber wie die img s feste Breite haben, sind sie nur übergelaufen.

Sie sollten auch prozentuale Breite für die IMGs verwenden. Wenn Sie die Breite oder die Höhe festlegen, wird die andere Dimension proportional skaliert.

Answer 2

Wenn Sie Bild skalieren, wenn Breite von weniger als 400px, dann müssen Sie @media Bildschirm ändern und (min-width: 400px) Bildschirm @media und (max-width: 399px)

TIPP: Eine Möglichkeit, Ihren Bildmaßstab zu erhalten, besteht darin, den Wert img max-width: 100% zu setzen. Wenn das div, das das Bild umgibt, kleiner oder größer wird, wenn die Größe des Browsers geändert wird, skaliert das Bild mit.

Hier ist eine ähnliche Position, die Ihnen helfen können: Make an image responsive - simplest way

Answer 3

Die ‚richtige‘ Lösung stark vom Kontext Ihrer Website abhängt. Sie können mehrere Ansätze verwenden, um dies zu erreichen.

Eine wäre, nur geben Sie Ihren Bildern relative Abmessungen (%, em, or one of the new units wie rem, vh, ...). Diese skaliert sie automatisch entsprechend der Größe des umgebenden Elements (und damit des Browsers).

Auch, wenn Ihr Layout es wirklich erfordert, ich definiere oft nur eine Dimension (entweder Breite oder Höhe). Auf diese Weise kümmert sich der Browser automatisch um das Seitenverhältnis Ihrer Bilder.

Answer 4

Wenden Sie Ihr Bild auf die Klasse div als background an und verwenden Sie background-size, um entsprechend zu skalieren.

Answer 5

vh, wird das Bild abhängig von der Höhe des Ansichtsfensters skaliert, unabhängig davon, ob es auf dem Bild selbst oder auf dem übergeordneten Element platziert wird.

Es wird nicht funktionieren mit der Breite ganz gleich, wenn überhaupt. Ihr Bild wird relativ gut skalieren, aber es wird mit Nischen kämpfen, obwohl ich zugeben muss, dass sie sehr selten sind.

% skaliert das Bild auf dem relativen Prozentsatz des Behälters basiert, ob das der Körper Ihrer Seite oder eine entsprechenden div sein - in Ihrem Fall, dass die .iner.Das Problem dabei ist, dass das sich dann auf den Prozentsatz bezieht, den .iner erbt von .submain und das gleiche für .submain Prozent von .main. Elternschaft und Prozentsätze sind nie das größte Paar.

(Blau ist %, Schwarz ist vh)