Image Flex memfokuskan pada peranti lain, tetapi tidak pada komputer riba saya

Question

Saya sedang membuat halaman web dan saya menghadapi masalah, saya mempunyai 4 imej yang dipaparkan pada flex dalam halaman saya, apabila saya mengklik "Periksa" dan melihat penampilannya pada peranti lain, saya melihat 2 pada imej teratas , terdapat 2 lagi imej di bahagian bawah. Masukkan perihalan imej di sini tetapi apabila saya kembali dan memaparkannya pada komputer riba saya, saya melihat 3 imej di bahagian atas dan 1 imej di bahagian bawah, masukkan penerangan imej di sini Saya tertanya-tanya apa yang boleh saya lakukan untuk Memperbaikinya supaya ia sentiasa menunjukkan imej daripada gambar pertama (2 di atas, 2 di bawah). Ini adalah sekeping kod img{widt

P粉779565855 · Answer

Pelayar akan memuatkan seberapa banyak imej dengan lebar 350 piksel pada satu baris. Jika mereka tidak sesuai, ia membalut mereka ke baris seterusnya.

Jika anda ingin sentiasa mempunyai dua imej setiap baris dalam kotak fleksibel, anda boleh menetapkan lebar imej kepada 50% daripada lebar skrin. Memandangkan anda mempunyai 5px padding pada setiap sisi, anda boleh menolaknya daripada 50% menggunakan fungsi calc() seperti ini:

width: calc(50% - 10px);

Berikut ialah contoh kod anda:

img {
  width: calc(50% - 10px);
  padding: 5px;
  transition: transform 0.2s;
}

img:hover {
  cursor: pointer;
  transform: scale(1.03);
}

.container {
  margin-top: 80px;
  display: flex;
  max-width: 1500px;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}