wake-up-neo.net

so geben Sie dem Image eine dynamische Breite und Höhe, wenn Sie ein Bootstrap-responsives Grid-System verwenden

Ich benutze das Bootstrap-Grid-System und hier ist meine Website . Das Problem ist, dass die Gegenstandskarte beim ersten Laden so beschissen aussieht:

enter image description here

und so sieht es nach dem Laden aus:

enter image description here

Wie Sie sehen können, liegt das Problem daran, dass ich nicht die Breite und Höhe des Bildes angeben kann. Daher sehe ich vor dem Laden dieses seltsame Layout, das nicht gut ist. Das Problem, warum ich keine Breite und Höhe angeben kann, liegt darin, dass dies ansprechend ist. Wenn ich die Breite des Browsers ändern, ändert sich auch die Breite der Karte, sodass die Angabe einer konstanten Breite und Höhe nicht funktioniert. Was ist die beste Lösung daraus?

10
adit

Sie können Ihr Bildverhältnis berechnen, wenn es bekannt ist, und dann die Auffüllung auf das Verhältnis einstellen

Schauen Sie sich die Js-Geige an:

http://jsfiddle.net/J8AYY/7/

<div class="img-container">
    <img src="">
</div>

.img-container {
    position:relative;
    padding-top:66.59%;
}

img {
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
}

Wenn Ihr Bild also 2197 Pixel breit und 1463 Pixel hoch ist

stellen Sie dann den Container, der das Bild enthält, so ein, dass die Auffüllfläche 1463/2197 * 100% ist. Setzen Sie dann Ihr Bild auf die absolute Position . Jetzt kann Ihr Bild reaktionsschnell sein und sich von kollabierenden Behältern sorgen

14
Chihung Yu

Sie müssen Ihre Miniaturansichten in einen dynamisch großen Container dessen Höhe proportional zu seiner Breite ist einfügen. Sie können dies tun, indem Sie width und padding-bottom im Container sowie einige andere Besonderheiten wie im Bootply und im folgenden Beispiel abgleichen:

Bootply

Beispiel:

CSS: 

.thumbnail_container {
     position: relative;
     width: 100%;
     padding-bottom: 100%; <!-- matching this to above makes it square -->
     float:left;
}

.thumbnail {
    position:absolute;
    width:100%;
    height:100%;
}
.thumbnail img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

img{
    max-height:100%;
    max-width:100%;
}

HTML:

<div class="container-fluid"> <!-- this makes your images scale constantly, between breakpoints as welll. removing -fluid makes then jump in size at breakpoints -->
  <div class="row">

  <div class="col-md-3 col-sm-4 col-xs-6">
    <div class="thumbnail_container">
      <div class="thumbnail">
          <img src="http://placehold.it/400x600">
      </div>
    </div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
    <div class="thumbnail_container">
      <div class="thumbnail">
        <img src="http://placehold.it/600x600">
      </div>
    </div>  
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
    <div class="thumbnail_container">
      <div class="thumbnail">
          <img src="http://placehold.it/600x400">
      </div>
    </div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
    <div class="thumbnail_container">
      <div class="thumbnail">
        <img src="no-photo" /> <!-- No Photo, but it still scales -->
      </div>
    </div>  
</div>

Sie werden feststellen, dass der Container in der letzten Miniaturansicht quadratisch ist, obwohl keine Datei geladen ist. Dies ist der Schlüssel, der Ihr spezifisches Problem behebt.

Hinweis: Wenn Sie padding-bottom mit width vergleichen, erhalten Sie einen quadratischen Miniaturcontainer. Sie können ihn jedoch beliebig anpassen, indem Sie den padding-bottom % anpassen.

Note2: Da Sie Ihren Code nicht freigegeben haben, müssen Sie wahrscheinlich eine Reihe von Klassen umbenennen und testen, damit dies funktioniert. Ich musste bei Ihrem Setup aufgrund dessen, was ich auf Ihrer Website gesehen habe, raten. Ich hoffe es hilft!

3
Shawn Taylor

Wenn Sie mit Bildern arbeiten, die alle die gleiche Größe haben, können Sie für jeden Schritt der reagierenden Seite eine Mindesthöhe für das Bildelement festlegen. Sie müssen herausfinden, wie groß die Bilder bei jedem Schritt des responsiven Seitendesigns sind, aber es könnte ungefähr so ​​aussehen:

.item-card img {
  min-height: 100px;
}

// Small screen
@media (min-width: 768px) {
  .item-card img {
    min-height: 150px;
  }
}

// Medium screen
@media (min-width: 992px) {
  .item-card img {
    min-height: 200px;
  }
}

// Large screen
@media (min-width: 1200px) {
  .item-card img {
    min-height: 250px;
  }
}
1
theJoeBiz

Soweit ich Ihre Frage verstanden habe, soll das Bild automatisch angepasst werden, wenn die Größe des Browsers geändert wird. Wir können dies mithilfe der folgenden css erreichen.

.image-box img {
    width: 100%; 
}

Wenn wir nur die Breite des Bildes angeben, wird die Höhe automatisch berechnet. Das Seitenverhältnis für das Bild wird beibehalten. Breite 100% passt genau in den Container des Bildes. Dieser Code funktioniert möglicherweise nicht für das Hintergrundbild.

1
kundan Karn

Ihr Problem ist, dass die Variable img zum Zeitpunkt des Ladens eine Höhe von 0 und eine Breite von 100% hat. Sie haben also ein leeres Bild, wenn die Seite geladen wird.

Sie können einen Image-Preloader verwenden:

Wenn Sie möchten, dass alle Bilder die gleiche Höhe haben, verwenden Sie das Plugin Fake Crop jQuery. Die Bilddatei wird zwar nicht zugeschnitten, das Bild wird jedoch mit den CSS-Positionierungseigenschaften "abgeschnitten".

Sie können dem Container auch einen min-height zuweisen:

 .product-view .img-responsive {min-height:352px; background:#fff;}

Sie können auch in Lazy Loading nachschauen:

0
Wissam El-Kik
   use bootstrap or @media queries

  /* Small devices (tablets, 768px and up) */
  @media (min-width: @screen-sm-min) { ... }

 /* Medium devices (desktops, 992px and up) */
  @media (min-width: @screen-md-min) { ... }

   /* Large devices (large desktops, 1200px and up) */
    @media (min-width: @screen-lg-min) { ... }

      We occasionally expand on these media queries to include a max-width to limit CSS to a narrower set of devices.

    @media (max-width: @screen-xs-max) { ... }
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
    @media (min-width: @screen-lg-min) { ... }

     http://getbootstrap.com/css/#grid 
0
Kisspa