Comment Vue détermine-t-il si une image est verticale (trois méthodes)

Vue est un framework front-end populaire qui nous permet de développer plus facilement des applications Web. Dans Vue, les images sont l'un des éléments couramment utilisés dans le développement Web, mais nous devons parfois déterminer si l'image est horizontale ou verticale pour différents traitements. Voici quelques façons de savoir si une image est verticale.

1. Utilisation de l'objet Image en JavaScript

L'utilisation de l'objet Image en JavaScript peut obtenir la largeur et la hauteur d'origine de l'image pour déterminer la direction de l'image.

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

2. Utilisez l'attribut aspect-ratio de CSS

CSS3 a ajouté l'attribut aspect-ratio, qui est utilisé pour définir le rapport hauteur/largeur de l'élément. Nous pouvons utiliser cet attribut pour déterminer la direction de l'image.

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. Utiliser CSS @media query

CSS @media query peut définir différents styles CSS en fonction de différentes largeurs d'écran. Si nous définissons différents formats d'image, nous pouvons déterminer si l'image est paysage ou portrait en fonction de l'orientation de l'écran.

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

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

Il existe plusieurs méthodes ci-dessus pour juger de la direction des images. En développement réel, vous pouvez choisir la méthode qui vous convient en fonction de vos besoins.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!