ວິທີທີ່ສ້າງ: ຮູບພາບຄົງທີ່ສຸດ

ວິທີທີ່ສ້າງຮູບພາບຄົງທີ່ສຸດ

ການທີ່ທັງໝົດ - ສະເໜີ HTML:

<img src="nature.jpg" alt="Nature" class="responsive">

ການທີ່ສອງ - ສະເໜີ CSS:

ຖ້າເຈົ້າຕ້ອງການທີ່ຮູບພາບຈະມີຄວາມພາດທີ່ສາມາດຂະຫຍາຍແລະຫຼຸດລົງຕະຫຼອດການທົດລອງ ຂ້ອຍສະເໜີ CSS: width ປະກອບຕົວປະກາດ: 100%,height ແຕ່ງໃຫ້ auto:

ຄວາມຄິດທີ່ຈະນຳມາໃຊ້

.responsive {
  width: 100%;
  height: auto;
}

ທົດລອງດຽວວັນຕອນຕົ້ນ

ຖ້າເຈົ້າຕ້ອງການທີ່ຮູບພາບຈະຫຼຸດລົງໃນຄວາມພາດໃນຂະນະທີ່ຈະບໍ່ກວດກາກວ່າຈະຂະຫຍາຍລົງຫຼາຍກວ່າຄວາມພາດຕົ້ນເບື້ອງຕົ້ນ ຂ້ອຍສະເໜີ: max-width: 100%:

ຄວາມຄິດທີ່ຈະນຳມາໃຊ້

.responsive {
  max-width: 100%;
  height: auto;
}

ທົດລອງດຽວວັນຕອນຕົ້ນ

ຖ້າເຈົ້າຕ້ອງການຈຳກັດຮູບພາບຄົງທີ່ສູງສຸດແບບຄົງທີ່ສຸດຈາກຄວາມພາດຂອງຮູບພາບໃນທັງໝົດ ຂ້ອຍສະເໜີ: max-width ປະກອບຕົວປະກາດ ແລະ ຄູ່ມູນຄວາມພາດສະເພາະທີ່ເຈົ້າເລືອກ:

ຄວາມຄິດທີ່ຈະນຳມາໃຊ້

.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}

ທົດລອງດຽວວັນຕອນຕົ້ນ

ບັນດາໜ້າທີ່

教程：CSS 图像

教程：CSS 响应式网页设计