Wie ermittelt Vue, ob ein Bild vertikal ist (drei Methoden)

Vue ist ein beliebtes Frontend-Framework, mit dem wir Webanwendungen einfacher entwickeln können. In Vue sind Bilder eines der am häufigsten verwendeten Elemente in der Webentwicklung, aber manchmal müssen wir für unterschiedliche Verarbeitungen bestimmen, ob das Bild horizontal oder vertikal ist. Hier sind einige Möglichkeiten, um festzustellen, ob ein Bild vertikal ist.

1. Verwenden des Image-Objekts in JavaScript

Mit dem Image-Objekt in JavaScript können Sie die ursprüngliche Breite und Höhe des Bildes ermitteln, um die Richtung des Bildes zu bestimmen.

var img = new Image();
img.src = 'img.jpg';
img.onload = function() {
  if (img.width > img.height) {
    console.log('横图');
  } else {
    console.log('竖图');
  }
};

2. Verwenden Sie das Attribut „aspect-ratio“ von CSS

CSS3 hat das Attribut „aspect-ratio“ hinzugefügt, mit dem das Seitenverhältnis des Elements festgelegt wird. Mit diesem Attribut können wir die Richtung des Bildes bestimmen.

img {
  aspect-ratio: 1/1; /* 宽高比为1:1 */
  position: relative;
}
img::before {
  content: '';
  display: block;
  padding-bottom: 100%; /* 内容区高度为0，生成一个占位符，避免图片被撑宽 */
}

/* 竖图 */
img[aspect-ratio="1/1"]::before {
  padding-bottom: 133%; /* 内容区高度为0，生成一个占位符，占比为4:3 */
}

/* 横图 */
img[aspect-ratio="1/1"]::before {
  padding-bottom: 75%; /* 内容区高度为0，生成一个占位符，占比为3:4 */
}

3. Verwenden Sie CSS @media query

CSS @media query kann je nach Bildschirmbreite unterschiedliche CSS-Stile festlegen. Wenn wir unterschiedliche Seitenverhältnisse einstellen, können wir anhand der Bildschirmausrichtung bestimmen, ob das Bild im Quer- oder Hochformat ist.

/* 竖图 */
@media (max-aspect-ratio: 3/4) {
  img {
    width: 100%;
    height: auto;
  }
}

/* 横图 */
@media (min-aspect-ratio: 4/3) {
  img {
    width: auto;
    height: 100%;
  }
}

Die oben genannten Methoden zur Beurteilung der Richtung von Bildern können in der tatsächlichen Entwicklung entsprechend Ihren Anforderungen ausgewählt werden.

Das obige ist der detaillierte Inhalt vonWie ermittelt Vue, ob ein Bild vertikal ist (drei Methoden). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!