html5 - Bagaimana untuk menjadikan nisbah lebar dan ketinggian imej tepat padan dengan saiz skrin penuh semasa telefon bimbit pada terminal mudah alih?

Question

1. Bagaimana untuk melaraskan nisbah aspek imej kepada saiz skrin penuh semasa telefon bimbit pada terminal mudah alih?

Apabila lebar 100%, tinggi perlu adaptif, dan apabila tinggi 100%, lebar perlu adaptif,

Dengan cara ini, gambar mungkin melebihi skrin semasa dan bar skrol akan muncul, dan anda perlu meluncur untuk melihatnya, atau akan ada ruang kosong dan tidak mengisi keseluruhan skrin.

Oleh kerana gambar semasa tidak mempunyai latar belakang warna yang sama, ia tidak boleh dicapai dengan mengisi latar belakang Adakah terdapat nisbah saiz gambar yang baik yang boleh mencapai keperluan ini.

2.Kod

.imgsrc img {
    width: 100%;
}

3

怪我咯 · Answer

Berdasarkan keperluan, adalah disyorkan untuk menetapkannya melalui atribut latar belakang css
Langkah pertama ialah menambah elemen DOM saiz skrin
Atau tetapkan terus pada imgsrc anda, dengan syarat saiz imgsrc adalah saiz skrin;
Sak. Saya juga mengesyorkan cara penulisan ini:

    background-image: url('链接');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

Kaedah berikut boleh memaparkan imej sepenuhnya, tetapi akan meregangkan imej latar belakang Jika skrin tidak dikunci, imej akan meregang teruk apabila skrin mendatar:

    background-image: url('链接');
    background-size: 100% 100%;

================================================ =

Juga Jika anda benar-benar taksub untuk memaparkan gambar sepenuhnya tanpa meregangkannya, sila sediakan pelan rujukan untuk reka bentuk:

Selepas merapikan garis besar gambar, tambah warna latar belakang, dan kemudian dapatkan nilai warna warna latar belakang daripada gambar, dalam imgsrc atau Dalam elemen DOM yang ditambahkan, tetapkan atribut css:

    background-color: white;// 拿到的图片背景色
    background-image: url('链接');
    background-size: 95%;  //可以写成固定值
    background-repeat: no-repeat;
    background-position: center;

给我你的怀抱 · Answer

Terdapat banyak cara untuk mencapainya. Kecuali untuk pengiraan js, teg boleh menggunakan atribut object-fit: cover; yang agak baharu. 标签可以用比较新的 object-fit: cover; 属性。

或者把图片放到背景里，再利用 background-size: cover; ，这种方式还可以通过百分比的 background-position

Atau letakkan imej di latar belakang, kemudian gunakan background-size: cover; Dengan cara ini, anda juga boleh menentukan fokus melalui peratusan background-position , yang boleh mengekalkan tumpuan Tempat itu sentiasa kelihatan. 🎜