ລາຍການຫົວເລື່ອງ
ເນື່ອງຈາກອິນເຕີເນັດໂທລະສັບມືຖືຂະຫຍາຍຕົວ,ການຕະຫຼາດ Wechatຄວາມນິຍົມຂອງໂທລະສັບມືຖືໄດ້ກາຍເປັນຊີວິດເຄື່ອງມືທີ່ຕ້ອງມີ.
ສ້າງເວັບໄຊທ໌ແມ່ແບບ, ແນະນໍາໃຫ້ໃຊ້WordPressຮູບແບບການປັບຕົວສຳລັບ:
- ຖ້າຜູ້ພັດທະນາຫົວຂໍ້ WordPress ບໍ່ໄດ້ເຮັດໃຫ້ຫນ້າຈໍດັດແປງຮູບພາບ HTML 5 ໄດ້ດີເມື່ອອອກແບບຫນ້າຫົວຂໍ້ WordPress ...
- ເມື່ອເບິ່ງເວັບໄຊທ໌ໃນອຸປະກອນມືຖື, ຈະມີຮູບພາບທີ່ບໍ່ຖືກຕ້ອງຫຼາຍ, ແລະປະສົບການຂອງຜູ້ໃຊ້ແມ່ນບໍ່ດີທີ່ສຸດ!
ການດັດແປງຮູບພາບ CSS ຫມາຍຄວາມວ່າແນວໃດ?
ການດັດແປງຮູບພາບ CSS ຫມາຍຄວາມວ່າເພື່ອເຮັດໃຫ້ຮູບພາບໃນຫນ້າເວັບ html, ຜ່ານລະຫັດ CSS:
- ປັບອັດຕະໂນມັດກັບຄວາມກວ້າງແລະຄວາມສູງຂອງອຸປະກອນທີ່ແຕກຕ່າງກັນ.
- ແທັກ img ຈະຖືກປັບຂະໜາດອັດຕະໂນມັດຕາມອັດຕາສ່ວນ.
ຕໍ່ໄປ,Chen Weiliangຂ້າພະເຈົ້າຈະແບ່ງປັນກັບທ່ານ CSS img ລະຫັດການຂະຫຍາຍອັດຕາສ່ວນ ^_^
ລະຫັດປັບຄວາມສູງແລະຄວາມກວ້າງຂອງຮູບ CSS
ໃສ່ຮູບໃນ html:
ຖ້າທ່ານຕ້ອງການໃຫ້ຮູບພາບປັບຕົວກັບຂະຫນາດຂະຫນາດນ້ອຍຂອງຫນ້າຈໍແທນທີ່ຈະຄົງຢູ່ໃນຄວາມກວ້າງແລະຄວາມສູງ.
ທ່ານສາມາດເພີ່ມລະຫັດຕໍ່ໄປນີ້ໃສ່ໄຟລ໌ style.css ຂອງຫົວຂໍ້ WordPress ຂອງທ່ານ ▼
/*图片自适应宽度和高度*/
img { max-width: 100%; height: auto; width: auto\9; width: auto; }ຄໍາຖະແຫຼງທີ່ນີ້max-widthກົດລະບຽບຄວາມກວ້າງສູງສຸດ
- ເພື່ອຮັບປະກັນວ່າຮູບພາບທັງໝົດຈະສະແດງໄດ້ສູງສຸດ 100% (ເຊັ່ນ: ພວກມັນສາມາດສະແດງໄດ້ຂະໜາດໃຫຍ່ເທົ່າກັບຮູບຂອງຕົນເອງ).
- ໃນຈຸດນີ້, ຖ້າອົງປະກອບທີ່ມີຮູບພາບ (ຕົວຢ່າງ, ຮ່າງກາຍຫຼື div ທີ່ມີຮູບພາບ) ມີຂະຫນາດນ້ອຍກວ່າຄວາມກວ້າງຂອງຮູບພາບ, ຮູບພາບຈະຖືກປັບຂະຫນາດເພື່ອໃຫ້ເຕັມພື້ນທີ່ສູງສຸດ.
width:auto;ຫມາຍຄວາມວ່າຄວາມກວ້າງອັດຕະໂນມັດ
\9 ມັນເປັນວິທີການຂຽນ hack css.
- ດ້ວຍວິທີນີ້, "\9" ຖືກເພີ່ມໃສ່ລະຫັດ css ປົກກະຕິ, ພຽງແຕ່ຕົວທ່ອງເວັບ IE ສາມາດຮັບຮູ້ມັນ, ຕົວທ່ອງເວັບອື່ນໆຈະບໍ່ສົນໃຈຄໍາຖະແຫຼງນີ້.
- ນີ້ຈະບັນລຸຄວາມແຕກຕ່າງຂອງຕົວທ່ອງເວັບ, ເຮັດໃຫ້ຈຸດປະສົງຂອງຕົວທ່ອງເວັບທີ່ເຂົ້າກັນໄດ້.
ເປັນຫຍັງຈຶ່ງບໍ່ໃຊ້ຄວາມກວ້າງ: 100%?
ເພື່ອບັນລຸການປັບຂະຫນາດຮູບພາບອັດຕະໂນມັດ, ທ່ານຍັງສາມາດໃຊ້ຄຸນສົມບັດຄວາມກວ້າງທີ່ໃຊ້ທົ່ວໄປໄດ້ເຊັ່ນ:.width：100％.
ຢ່າງໃດກໍຕາມ, ກົດລະບຽບນີ້ບໍ່ໄດ້ນໍາໃຊ້ຢູ່ທີ່ນີ້.
- ເນື່ອງຈາກວ່າກົດລະບຽບນີ້ຈະເຮັດໃຫ້ມັນກວ້າງເທົ່າກັບຖັງຂອງມັນ.
- ໃນກໍລະນີທີ່ຕູ້ຄອນເທນເນີກວ້າງກວ່າຮູບພາບ, ຮູບພາບຈະຖືກຍືດອອກໂດຍບໍ່ຈໍາເປັນ.
ຂໍ້ຄວນລະວັງ
CSS ເລືອກແມ່ນຫຍັງ? ຄວາມແຕກຕ່າງລະຫວ່າງ class ແລະ id ແມ່ນຫຍັງ?ການສອນຕໍ່ໄປນີ້ເວົ້າເຖິງ ▼
ວິທີການປັບຫນ້າເພື່ອຫຼິ້ນວິດີໂອ MP4 ຢູ່ໃນເວັບໄຊທ໌ມືຖື?ກະລຸນາກົດລິ້ງຂ້າງລຸ່ມນີ້▼
ຫວັງ Chen Weiliang Blog ( https://www.chenweiliang.com/ ) ແບ່ງປັນ "ຫນ້າເວັບ HTML 5 ຮູບພາບການປັບຕົວຫນ້າຈໍ img ລະຫັດການຂະຫຍາຍອັດຕາສ່ວນ", ເຊິ່ງເປັນປະໂຫຍດສໍາລັບທ່ານ.
ຍິນດີຕ້ອນຮັບແບ່ງປັນການເຊື່ອມຕໍ່ຂອງບົດຄວາມນີ້:https://www.chenweiliang.com/cwl-964.html