web-dev-qa-db-de.com

Responsive Images mit CSS

Ich finde es schwierig, die Größe der Bilder zu ändern, um sie ansprechbar zu machen.

Ich entwickle eine PHP-Anwendung, um eine Website automatisch in eine responsive Version zu konvertieren. Ich bleibe ein bisschen bei den Bildern.

Ich habe erfolgreich zu jedem Bild auf einer Website eine Wrapper-Klasse hinzugefügt und kann die Größe der Bilder sehr gut anpassen.

Mein Problem liegt bei Bildern, die von Natur aus kleiner als das Fenster sind, wie Logos und Icons. Ich möchte diese Größe nicht ändern.

Mein Code konvertiert derzeit:

<img src="[src]" />

in:

<div class="erb-image-wrapper">
    <img src="[src]" />
</div>

Wo verwende ich folgendes CSS:

.erb-image-wrapper{
    max-width:90%;
    height:auto;
    position: relative;
    display:block;
    margin:0 auto;
}
.erb-image-wrapper img{
    width:100% !important;
    height:100% !important;
    display:block;
}

Dadurch wird die Größe aller Bilder geändert, aber ich möchte nur, dass die Größe der Bilder über die Breite der Seite angepasst wird. Kann ich das über CSS erreichen?

42
Dan Hanly
.erb-image-wrapper img{
    max-width:100% !important;
    height:auto;
    display:block;
}

Arbeitete für mich.
.__ Vielen Dank für MrMisterMan für seine Hilfe.

86
Dan Hanly

Verwenden Sie auch max-width für die Bilder. Veränderung:

.erb-image-wrapper img{
    width:100% !important;
    height:100% !important;
    display:block;
}

zu...

.erb-image-wrapper img{
    max-width:100% !important;
    max-height:100% !important;
    display:block;
}
14
MrMisterMan

der beste Weg, den ich gefunden habe, war, das Bild, das Sie ansprechend anzeigen möchten, als Hintergrundbild festzulegen und eine CSS-Eigenschaft für das Div als Cover zu senden.

background-image : url('YOUR URL');
background-size : cover
0
Naseeruddin V N

Überprüfen Sie die Bilder zuerst mit PHP, wenn sie klein ist, dann die Standardgröße für das Logo .___. Geben Sie eine andere CSS-Klasse an und ändern Sie nicht die Größe

ich denke, du musst zwischendurch das Scripting aufnehmen 

0
Sahil Popli

um responsive ist einfach 

  • erstellen Sie zunächst eine Klasse namens cell, und geben Sie ihr die Eigenschaft display:table-cell
  • dann @ max-width:700px do {display:block; width:100%; clear:both} 

und das ist es keine absoluten divs je; divs muss 100% sein, dann max-width: - desired width - für das innere Framing. Eine echte responsive Website hat weniger als 9 Zeilen von CSS, was alles passiert ist, dass Sie in einer Welt voller Scheiße und über komplizierte Dinge sind. 

PS: reset.css-Stylesheets machen Css-Blinds aus einem logischen Grund, weshalb sie überhaupt Standardstile angegeben haben. 

0
Ben Edwards