JSFiddle - React, Tailwind, and code Playground

by Tìm ở đây Khoá học CNTT

HTML

<h2>Responsive Image Gallery</h2>
<h4>Thay đổi kích thước cửa sổ trình duyệt để xem hiệu ứng.</h4>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="https://timoday.edu.vn/wp-content/uploads/2021/04/img_5terre.jpg">
      <img src="https://timoday.edu.vn/wp-content/uploads/2021/04/img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>


<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="https://timoday.edu.vn/wp-content/uploads/2021/04/img_forest.jpg">
      <img src="https://timoday.edu.vn/wp-content/uploads/2021/04/img_forest.jpg" alt="Forest" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="https://timoday.edu.vn/wp-content/uploads/2021/05/img_lights.jpg">
      <img src="https://timoday.edu.vn/wp-content/uploads/2021/05/img_lights.jpg" alt="Northern Lights" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="https://timoday.edu.vn/wp-content/uploads/2021/05/img_lights.jpg">
      <img src="https://timoday.edu.vn/wp-content/uploads/2021/05/img_lights.jpg" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="clearfix"></div>
<div class="clearfix"></div>

<div style="padding:6px;">
  <p>Ví dụ này sử dụng truy vấn media để sắp xếp lại các hình ảnh trên các kích thước màn hình khác nhau: đối với màn hình rộng hơn 700px, nó sẽ hiển thị bốn hình ảnh cạnh nhau, đối với màn hình nhỏ hơn 700px, nó sẽ hiển thị hai hình ảnh cạnh nhau. Đối với màn hình nhỏ hơn 500px, hình ảnh sẽ xếp chồng lên nhau theo chiều dọc (100%). </p>
</div>

CSS

div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}