ການອອກແບບເວັບໄຊຕອບສະແດງ - ພາບ

ການນຳໃຊ້ການຈັດຕັ້ງ width

ຖ້າ width ຖ້າຈະຈັດຕັ້ງການຈັດຕັ້ງວ່າຄວາມສ່ວນທາງວ່າສາມາດສ້າງຕົກຕັດກັບຄວາມສ່ວນທາງແລະຈັດຕັ້ງຄວາມສາມາດທີ່ "auto":

实例

img {
  width: 100%;
  height: auto;
}

亲自试一试

ບໍ່ຄວນຫັງຄືນວ່າພາບຈະຂະຫຍາຍຕົກຕັດຫຼາຍກວ່າຄວາມສ່ວນທາງເບື້ອງເທື່ອຕົ້ນໃນຕົວຢ່າງທີ່ຫຼາຍ. ໃນສະເຫມີດສະເພາະຫຼາຍຢູ່ພວກເຮົາຈະນຳໃຊ້ max-width ປະເພດ.

ການນຳໃຊ້ການຈັດຕັ້ງ max-width

ຖ້າຈະຈັດຕັ້ງການຈັດຕັ້ງ max-width ວ່າ 100% ພາບຈະຖືກຂະຫຍາຍຕົກຕັດຕາມຄວາມຕ້ອງການ ແຕ່ຈະບໍ່ຈະຂະຫຍາຍຕົກຕັດຫຼາຍກວ່າຄວາມສ່ວນທາງເບື້ອງເທື່ອຕົ້ນ:

实例

img {
  max-width: 100%;
  height: auto;
}

亲自试一试

ການເພີ່ມພາບໄປໃນເວັບໄຊຄັນນີ້

实例

img {
  width: 100%;
  height: auto;
}

亲自试一试

ພາບຫຼັງສາຍ

ພາບຫຼັງສາຍຍັງສາມາດຕອບກັບການປ່ຽນຂະໜາດແລະການປ່ຽນຄວາມສ່ວນທາງ:

ນີ້ແມ່ນສາມວິທີທີ່ພວກເຮົາສະແດງຄືນນີ້:

1. ຖ້າຈະການຈັດຕັ້ງ background-size ການການຈັດຕັ້ງວ່າ "contain" ຈະມີການຂະຫຍາຍພາບພາບຫຼັງສາຍໃຫ້ຕົກຕັດຂະໜາດແລະພະຍາຍາມທີ່ຈະຕົກຕັດກັບເຂດຂັ້ນສາຍ. ແຕ່ພາບຈະຍັງຄົງມີສາມາດການປະກອບກັບການກວດສອບຂະໜາດຂອງພາບ(ຄວາມສ່ວນທາງແວດລາວກັບຄວາມສ່ວນທາງຫຼັງ):

ນີ້ແມ່ນກົດໝາຍ CSS:

实例

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid red;
}

亲自试一试

2. ຖ້າ background-size ຖານນະໂຍບາຍທີ່ກຳນົດເປັນ "100% 100%", ພາບກາບຫຼັງຈະຂະຫຍາຍເພື່ອກວມຂອງເຂດຂອງຂໍ້ມູນ:

ນີ້ແມ່ນກົດໝາຍ CSS:

实例

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: 100% 100%;
  border: 1px solid red;
}

亲自试一试

3. ຖ້າ background-size ຖານນະໂຍບາຍທີ່ກຳນົດເປັນ "cover", ພາບກາບຫຼັງຈະຂະຫຍາຍເພື່ອກວມຂອງເຂດຂອງຂໍ້ມູນ. ສະແດງວ່າ, "cover" ມີຄວາມສະເພາະຂອງຂະໜາດຫຼັງການຂະຫຍາຍ ແລະ ອາດຈະຕັດຕອງພາບກາບຫຼັງບາງສ່ວນ:

ນີ້ແມ່ນກົດໝາຍ CSS:

实例

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: cover;
  border: 1px solid red;
}

亲自试一试

ກຳນົດພາບສະເພາະສຳລັບອຸປະກອນຕ່າງຫາກັນ

ພາບຫຼາຍອັນຈະສະແດງໄດ້ງ່າຍໃນຈອງຄອມພິວເຕີ້ຍິງຂະໜາດໃຫຍ່, ແຕ່ບໍ່ມີຜົນໃນອຸປະກອນຂະໜາດນ້ອຍ. ວ່າເປັນຫຍັງຈະເອົາພາບຫຼາຍອັນໃຫ້ບັນທຶກ ເມື່ອຈະຕ້ອງກວດຄືນພາບ? ເພື່ອຫຼຸດຄວາມນໍາໄປຫຼືສຳລັບສິ່ງອື່ນໆ, ທ່ານສາມາດນຳໃຊ້ການຊອກຫາສະແດງສະເພາະໃນອຸປະກອນຕ່າງຫາກັນ:

ນີ້ແມ່ນພາບຫຼາຍອັນ ແລະ ພາບຕ່ຳອັນ, ຈະສະແດງໃນອຸປະກອນຕ່າງຫາກັນ:

实例

/* ສໍາລັບຄວາມສູງຕ່ຳກວ່າ 400 ພິມສະແດງ: */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* ສໍາລັບຄວາມສູງ 400 ພິມສະແດງ ແລະ ຫຼາຍກວ່າ: */
@media only screen and (min-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

亲自试一试

ທ່ານສາມາດນຳໃຊ້ການຊອກຫາສະແດງສະເພາະ: min-device-width ບໍ່ແມ່ນ min-width ທີ່ຈະກວດກາຄວາມສູງຂອງອຸປະກອນ ບໍ່ແມ່ນຄວາມສູງຂອງບູ່ຊາຍ. ເມື່ອທ່ານກວດຄືນຂະໜາດປ່ອງວາງບູ່ຊາຍ, ພາບຈະບໍ່ປ່ຽນ:

实例

/* ສໍາລັບອຸປະກອນພາບຕ່ຳກວ່າ 400 ພິມສະແດງ: */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* ສໍາລັບອຸປະກອນພາບສູງ 400 ພິມສະແດງ ແລະ ຫຼາຍກວ່າ: */
@media only screen and (min-device-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

亲自试一试

HTML5 <picture> ປະກອບ

HTML5 ໄດ້ເຂົ້າມາ ປະກອບ, ທີ່ທາງທີ່ທ່ານສາມາດກຳນົດພາບພາບຫຼາຍອັນ:

ການສະໜັບສະໜູນຂອງບູ່ຊາຍ

38.0 13 38.0 9.1 25.0

ປະສົມກັບ <video> ແລະ <audio> ປະກອບ. ພວກເຮົາໄດ້ກຳນົດຕົວເກິນຫຼາຍອັນ ແລະ ການຈັບຄືນກັບຄວາມສຳຄັນທຳອິດແມ່ນຕົວເກິນທີ່ກຳລັງໃຊ້:

实例


  
  
  Flowers

亲自试一试

srcset 属性是必需的，它定义图像的来源。

media 属性是可选的，它接受可在 CSS @media 规则 中找到的媒体查询。

提示：您还应该为不支持 元素的浏览器定义 元素。