Bagaimanakah Vue menentukan sama ada gambar adalah menegak (tiga kaedah)

Vue ialah rangka kerja bahagian hadapan yang popular yang membolehkan kami membangunkan aplikasi web dengan lebih mudah. Dalam Vue, gambar ialah salah satu elemen yang biasa digunakan dalam pembangunan web, tetapi kadangkala kita perlu menentukan sama ada gambar itu mendatar atau menegak untuk pemprosesan yang berbeza. Berikut ialah beberapa cara untuk mengetahui sama ada imej adalah menegak.

1. Gunakan objek Imej dalam JavaScript

Gunakan objek Imej dalam JavaScript untuk mendapatkan lebar dan ketinggian asal imej untuk menentukan arah imej.

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

2. Gunakan atribut nisbah aspek CSS

CSS3 telah menambah atribut nisbah aspek, yang digunakan untuk menetapkan nisbah aspek elemen. Kita boleh menggunakan atribut ini untuk menentukan arah imej.

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

CSS @media query boleh menetapkan gaya CSS yang berbeza mengikut lebar skrin yang berbeza. Jika kita menetapkan nisbah aspek yang berbeza, kita boleh menentukan sama ada imej itu landskap atau potret berdasarkan orientasi skrin.

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

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

Di atas adalah beberapa kaedah untuk menilai arah gambar Dalam perkembangan sebenar, anda boleh memilih kaedah yang sesuai dengan keperluan anda.

Atas ialah kandungan terperinci Bagaimanakah Vue menentukan sama ada gambar adalah menegak (tiga kaedah). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!