learnhtml
  • Responsive thẻ meta
  • 🥹[GSAP] một mẫu sử dụng ScrollTrigger, Observer, ScrollSmoother crack (ok)
  • 😝Font Awesome Kits are here to save the day! Fast, flexible, friendly, and full of icons (ok)
  • 😅Custom Map
  • 🥰D3.js render Vietnam map (ok)
  • 😆Free Vietnam SVG Map (ok)
  • Tính khoảng cách đường bay Airport Distance Map
  • 😍Bộ công cụ chuyển đổi Text to SVG && Animation 😉
  • 😅Cách sử dụng aspect ratio với CSS3, video aspect-ratio (ok)
  • 😅is there a way I can create an Email link defaulting to Gmail? (ok)
  • 😅document.write jquery-3.7.0.min.js (ok)
  • 😅CodePen Home File Sharing Web App (ok)
  • 😅Template Tiktok khamphukhoa.net.vn (ok)
  • 😅Div Table Full (ok)
  • 🧐Coreui giao diện admin sử dụng bootstrap 5 (ok)
  • 😆Type datetime-local (ok)
  • [Admin] AdminLTE (ok)
  • [ADMIN] Laravel Admin (ok)
  • Thẻ colgroup cho phép chúng ta điều chỉnh độ rộng của table (ok)
  • Tổng quan về Material Design Lite
  • Fullscreen Horizontal Page Slider with jQuery and CSS3 - HSlider scroll template html (ok)
  • Bảng mã ký tự hay dùng :))) trong html
  • Tất cả những gì bạn cần biết về thuộc tính Data trong HTML5
  • Responsive Images trên Web
  • Tìm hiểu về BEM trong 15 phút
  • Cách sử dụng base để copy đường dẫn :(
  • Structure website HTML
  • Show Heading (ok)
  • Refused to display site in an iframe, X-Frame-Options to 'SAMEORIGIN' (ok)
  • --------- Start AppML --------------
  • AppML Tutorial (ok)
  • appml-include-html, appml-controller (ok)
  • AppML Messages (ok)
  • AppML API (ok)
  • AppML PHP (ok)
  • --------- End AppML --------------
Powered by GitBook
On this page
  • Giới thiệu
  • Cách thực hiện
  • Kết luận

Was this helpful?

Cách sử dụng aspect ratio với CSS3, video aspect-ratio (ok)

https://viblo.asia/p/cach-su-dung-aspect-ratio-voi-css3-vyDZOpMxlwj

PreviousBộ công cụ chuyển đổi Text to SVG && Animation 😉Nextis there a way I can create an Email link defaulting to Gmail? (ok)

Last updated 1 year ago

Was this helpful?

Giới thiệu

Aspect ratio là tỉ lệ khung hình của 1 element, là mối quan hệ giữa chiều rộng và chiều cao của element đó. Trong thiết kế web được sử dụng để duy trì tỷ lệ cho các video để khi responsvie tránh tình trạng video đó bị crop. Có 2 tỷ lệ phổ biến hiện nay đó là 4:3 và 16:9.

Cách thực hiện

  • Bước 1: Đầu tiên tiên ta cần tạo các phần từ HTML, gồm có phần tử cha có tên là .aspect-ratio-169, và bên trong là 1 phần tử con ( có thể mà image hoặc 1 video bất kỳ), ở đây mình dùng iframe video.

HTML:

<div class="aspect-ratio-169">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/BIvezCVcsYs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
  • Bước 2: Sử dụng 1 số thuộc tính cơ bản của CSS để tạo ra aspect ratio.

CSS:

.aspect-ratio-169 {
  display: block;
  position: relative;
  padding-top: 56.25%;
}

.aspect-ratio-169 iframe {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

Giải thích:

  • ở class .aspect-ratio-169 ta sử dụng positon: realative dùng để thiết lập một phần tử sử dụng các thuộc tính position (absolute,static,fixed) mà không làm ảnh hưởng đến việc hiển thị ban đầu.

  • ở element con (mình đang sử dụng iframe) sử dụng position: absolute dùng để thiết lập vị trí của một phần tử nhưng nó sẽ luôn nằm trong một phần tử mẹ đang là relative. Với chiều dài và rộng là 100% và bắt đầu với toạ độ left: 0 và top: 0, như vậy là phần tử cha rộng bao nhiều thì phần tử con sẽ có độ rộng và dài bấy nhiêu.

  • Để có tỷ lệ ratio là 16/9 trong mọi màn hình khi resize thì bắt buộc ta phải sử dụng đơn vị là % thay vì 1 đơn vi cố định như px, và tỉ lệ đó được tính bằng chiều (rộng / dài)*100% = (9/16)*100% = 56.15%. dó cũng chính là giá trì padding top ta cần tạo ra kích thước của phần tử cha và tỷ lệ khung hình.

Kết quả thu được sẽ là 1 tỷ lệ khung hình 16/9 kể cả khi bạn reszie browser vẫn luôn giữ nguyên tý lệ khung hình đó.

Ngoài ra các bạn có thể dùng aspec ratio cho hình hảnh và khi sử dụng cho hình ảnh bạn nên dùngobject-fit, object-position , và còn 1 số tỷ lệ khác như:

aspect ratio  | padding-bottom (or padding-top) value
--------------|----------------------
    16:9      |       56.25%
    4:3       |       75%
    3:2       |       66.66%
    8:5       |       62.5%

Kết luận

Sau khi đọc bài viết trên mong rằng cách bạn có thể hiểu được và sử dụng aspect ratio vào việc xây dựng những layout đẹp mắt, đáp ứng được tất cả các màn hình mà không bị vỡ hay crop. Cảm ơn các bạn đã đọc và theo dõi bài viết của mình, xin cảm ơn.

😅
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio