Egal wie ich mein Bild skaliere, es ist immer zu groß.

Question

Hi,
ich versuche gerade ein paar Bilder nebeneinander in einen Text in meinem Fragebogen einzufügen. Dazu habe ich mir den table html code rausgesucht und das klappt ansich auch, das Problem ist nur, dass die Bilder immer (egal wie ich sie vorher skaliere) riesengroß sind und die ganze "Tabelle" damit deutlich breiter ist als der Fragebogen ansich und man zur Seite scrollen müsste um alle 3 Bilder zu sehen. Könnt ihr mir sagen, was ich da falsch mache?

Answer 1

Ohne Ihren Code zu kennen ist das schwierig.

Ich verwende momentan diesen Code, der mir neun Bilder (3x3) auf einer Seite anzeigt.

<style>
* {
  box-sizing: border-box;
}

.column {
  float: left;
width: 33.33%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}
</style>



<div class="row">
  <div class="column">
    <img src="BUM1.jpg" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="BUM2.jpg" alt="Forest" style="width:100%">
  </div>
  <div class="column">
    <img src="BUM3.jpg" alt="Mountains" style="width:100%">
  </div>
</div>
<div class="row">
  <div class="column">
    <img src="BUM4.jpg" alt="Snow" style="width:100%">
  </div>
  <div class="column" id="speacial">
    <img src="BUM5.jpg" alt="Forest" style="width:100%" align="center">
  </div>
  <div class="column">
    <img src="BUM6.jpg" alt="Mountains" style="width:100%">
  </div>
</div>
<div class="row">
  <div class="column">
    <img src="BUM7.jpg" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="BUM8.jpg" alt="Forest" style="width:100%">
  </div>
  <div class="column">
    <img src="BUM9.jpg" alt="Mountains" style="width:100%">
  </div>
</div>

Sie müssen hier nur die überflüssigen Teile der Tabelle (Bilder 4-9) herauslöschen und die Bildernamen anpassen.

Viele Grüße

Answer 2

(egal wie ich sie vorher skaliere) riesengroß

Wahrscheinlich sind sie das gar nicht ... aber Ihre Browser hat noch die "alten" unskalierten Bilder im Cache.

Das lässt sich relativ einfach lösen. Drücken Sie auf die Taste F5 ("Seite neu laden"), damit sich der Browser die aktuellen Bilder vom Server holt.