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

Question

Saya sedang mencipta halaman web dan saya menghadapi masalah, saya mempunyai 4 imej yang muncul pada flex dalam halaman saya, apabila saya mengklik "Periksa" dan melihat cara ia muncul pada peranti lain, saya nampak ada 2 di bahagian atas imej, dan 2 lagi imej di bahagian bawah. Masukkan penerangan 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 ingin tahu apa yang boleh saya lakukan untuk membetulkannya supaya ia sentiasa menunjukkan imej dari gambar pertama (2 di atas, 2 di bawah).

Ini adalah sekeping kod saya

img {
width: 350px;
padding: 5px;
transition: transform .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;
}

Answer 1

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;
}