Die Größenanpassung der Bilder ein html/css

Habe ich ein paar Bilder in eine facebook-app. Das problem ist, dass das Bild ist ziemlich groß und ich muss es schauen auch, ob der Zugriff von einem computer oder Telefon. Die Festlegung auf einige fixe Größe ist, würde offensichtlich machen es schlecht Aussehen, unter Berücksichtigung der verschiedenen Bildschirm-Maßen.

So, wie soll ich die Größe ändern, so dass es Aussehen würde, gut auf jedem Bildschirm?

  • Ist das Bild INHALT oder Teil der Schnittstelle?
  • Es ist Teil des Inhalts, es ist ein element in der Liste
InformationsquelleAutor Bujanca Mihai | 2013-04-04
  1. 2

    Legen Sie die Breite und Höhe auf die img tags werden Prozentsätze (der container):

    <img src="http://..." alt="" width="50%" height="30%" />

    Anpassung in Prozent an Ihre Bedürfnisse an.

    InformationsquelleAutor Alex W
  2. 1

    Verwendung von media queries.
    e.g:

     @media all and (min-width: 1001px) {
  img {
    width: 100%; /* insert prefered value */
    height: auto;
  }
}

@media all and (max-width: 1000px) and (min-width: 700px) {
  img {
    width: 100%; /* insert preferred value */
    height: auto;
  }
}

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  img {
    width: 100%; /* insert preferred value */
    height: auto;
  }
}
    InformationsquelleAutor ms2
  3. 0

    Versuchen, diese

     img
 {
    width:100%;/*adjust this value to your needs*/
    max-width: the size of the image;/* so it wont get bigger and pixelated*/
    height:auto;
 }

    weitere option, wenn möglich, ist die Verwendung von media queries, so dass für unterschiedliche browser-Größen, die Sie laden können unterschiedliche Größe des Bildes.

    hier ist ein fiddle um zu sehen, ob dies ist, was Sie versuchen zu erreichen

    InformationsquelleAutor trajce
Schreibe einen Kommentar