masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > 纯js实现div内图片自适应大小(已测试，兼容火狐)_javascript技巧

纯js实现div内图片自适应大小(已测试，兼容火狐)_javascript技巧

WBOY
Lepaskan： 2016-05-16 16:44:23
asal
1216 orang telah melayarinya

这代码实现的功能就是平常我们遇到的一个div里面包含img的时候，在img图片大小未知，div大小未知的情况下，让图片自适应大小，对于图片本身小于div容器大小时，不作处理。因为如果拉伸，图片可能就失真了。

废话不多说，直接上代码，已测试，兼容火狐，谷歌，IE6，IE7/8

以下是js代码：

复制代码 代码如下:



以下是html代码：
复制代码 代码如下:

纯js实现div内图片自适应大小(已测试，兼容火狐)_javascript技巧


以下是css代码：
复制代码 代码如下:

.sy_pic{ width:200px; height:300px; border:#000 solid 5px; text-align:center;}

自己换下图片地址使用。有问题或者指教请加QQ群：255708401。
Label berkaitan：
图片 saiz penyesuaian
sumber：php.cn
Artikel sebelumnya：jQuery图片切换插件jquery.cycle.js使用示例_jquery Artikel seterusnya：select多选 multiple的使用示例_javascript技巧
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1335
Ungkapan biasa untuk memadankan perkataan Saya mempunyai skrip di mana saya cuba memadankan nama kerja baharu dengan nama kerja sedi...
daripada 2024-04-06 21:24:04
0
1
606
Ubah suai gaya CSS sebaris secara dinamik dalam Javafx Saya cuba menukar imej latar belakang anak tetingkap apabila aplikasi dimaksimumkan. Latar...
daripada 2024-04-06 20:57:16
0
1
487
Menggunakan Grid untuk Mencipta Reka Bentuk Khusus Ini: Panduan Langkah demi Langkah Saya cuba membuat reka letak yang serupa dengan imej ini, saya telah cuba menggunakan grid...
daripada 2024-04-06 20:29:08
0
2
492
Dalam paparan mudah alih, bagaimana saya boleh menutup bar navigasi ini apabila pengguna mengklik pada pautan? Apabila pengguna mengklik pautan untuk menyemak imbas tapak web, bar navigasi tidak ditutu...
daripada 2024-04-06 19:23:03
0
1
411
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan