Articles
Panimula sa CSS
`aspect-ratio` na Ari-arian at Tumutugong Disenyo

`aspect-ratio` na Ari-arian at Tumutugong Disenyo

Ipinaliliwanag ng artikulong ito ang aspect-ratio na ari-arian at tumutugong disenyo.

Ipinakikilala namin ang mga teknik sa tumutugong disenyo gamit ang aspect-ratio na ari-arian.

YouTube Video

HTML para sa Preview

css-responsive-aspect-ratio.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-responsive-aspect-ratio.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Responsive Design</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>aspect-ratio</h2>
20        </header>
21        <article>
22            <h3>aspect-ratio Syntax</h3>
23            <section>
24                <header><h4>CSS</h4></header>
25<pre class="sample">
26aspect-ratio: &lt;ratio&gt;;
27</pre>
28            </section>
29        </article>
30        <article>
31            <h3>aspect-ratio 1:1</h3>
32            <section>
33                <header><h4>CSS</h4></header>
34<pre class="sample">
35.square {
36    width: 200px;
37    aspect-ratio: 1 / 1;
38}
39</pre>
40            </section>
41            <header><h4>HTML+CSS</h4></header>
42            <section class="sample-view">
43              <img src="example.jpg" class="square">
44            </section>
45        </article>
46        <article>
47            <h3>aspect-ratio 16:9</h3>
48            <section>
49                <header><h4>CSS</h4></header>
50<pre class="sample">
51.widescreen {
52    width: 100%;
53    aspect-ratio: 16 / 9;
54}
55</pre>
56            </section>
57            <section class="sample-view">
58              <img src="example.jpg" class="widescreen">
59            </section>
60        </article>
61        <article>
62            <h3>aspect-ratio 2</h3>
63            <section>
64                <header><h4>CSS</h4></header>
65<pre class="sample">
66.custom-ratio {
67    width: 400px;
68    aspect-ratio: 2;
69}
70</pre>
71            </section>
72            <section class="sample-view">
73              <img src="example.jpg" class="custom-ratio">
74            </section>
75        </article>
76        <article>
77            <h3>aspect-ratio Example</h3>
78            <section>
79                <header><h4>HTML</h4></header>
80<pre>
81&lt;div class="video-container"&gt;
82  &lt;iframe src="https://www.youtube.com/embed/example"&gt;&lt;/iframe&gt;
83&lt;/div&gt;
84</pre>
85                <header><h4>CSS</h4></header>
86<pre class="sample">
87.video-container {
88    width: 100%;
89    aspect-ratio: 16 / 9;
90}
91</pre>
92            </section>
93        </article>
94    </main>
95</body>
96</html>

aspect-ratio na Katangian

Ang katangiang aspect-ratio ay ginagamit upang itakda ang proporsyon ng lapad sa taas (aspect ratio) ng isang elemento. Ito ay kapaki-pakinabang kapag nais mong ipakita ang isang elemento na may fixed na proporsyon, lalo na para sa mga media content tulad ng mga larawan o video, o sa responsive design.

Pangunahing Syntax 

1aspect-ratio: <ratio>;
  • Ang <ratio> ay tumutukoy sa proporsyon ng lapad sa taas. Ang proporsyon ay isinusulat sa format na "lapad:taas" o kinakatawan ng isang numero para sa proporsyon ng lapad sa taas.

Halimbawa

1:1 Proporsyon ng Aspeto (Parisukat)

Ganito ang itsura nito kapag 1:1 ang proporsyon ng aspeto.

1.square {
2    width: 200px;
3    aspect-ratio: 1 / 1;
4}
  • Sa kasong ito, ang mga elementong may .square na klase ay laging may pantay na lapad at taas, kaya lumalabas itong parang parisukat.

16:9 Proporsyon ng Aspeto (Widescreen na Video o Larawan)

Ganito ang itsura kapag 16:9 ang proporsyon ng aspeto, na kadalasang ginagamit para sa widescreen na mga video o larawan.

1.widescreen {
2    width: 100%;
3    aspect-ratio: 16 / 9;
4}
  • Sa kasong ito, ang mga elemento na may class na .widescreen ay awtomatikong ina-adjust ang kanilang taas ayon sa lapad habang pinapanatili ang 16:9 na aspect ratio.

Tukuyin ang Proporsyon Gamit ang Isang Numero

Ganito ang itsura kapag tinukoy ang proporsyon gamit lamang ang isang numero.

1.custom-ratio {
2    width: 400px;
3    aspect-ratio: 2;
4}
  • Dito, ang numero 2 ay kumakatawan sa 2 / 1 na proporsyon, na ginagawang doble ang lapad ng elemento kumpara sa taas nito.

Mga Benepisyo ng Katangiang aspect-ratio

  • Responsive na Disenyo Ang elemento ay awtomatikong nag-a-adjust sa laki nito habang pinapanatili ang proporsyon ng aspeto sa iba't ibang device at laki ng window.
  • Simpleng Pagpapatupad Para mapanatili ang tiyak na proporsyon, karaniwang ginagamit ang tradisyonal na paraan tulad ng padding, ngunit gamit ang aspect-ratio, mas madali na itong ma-set.

Aktwal na Halimbawa ng Paggamit

Halimbawa, ang mga video player tulad ng YouTube ay karaniwang ipinapakita gamit ang 16:9 na proporsyon ng aspeto. Upang mapanatili ang ratio na ito, maaaring gamitin ang property na aspect-ratio upang madaling lumikha ng responsive na video container.

1<div class="video-container">
2  <iframe src="https://www.youtube.com/embed/example"></iframe>
3</div>
1.video-container {
2    width: 100%;
3    aspect-ratio: 16 / 9;
4}
  • Pinapayagan nito ang mga video na mapanatili ang 16:9 na ratio sa anumang device.

Buod

  • Ang aspect-ratio ay isang property na tumutukoy sa proporsyon ng lapad sa taas ng isang elemento.
  • Sa pamamagitan ng pagtukoy ng proporsyon, madaling maipapatupad ang responsive na disenyo.
  • Napakakombinyente nito para sa mga elemento na kailangang mapanatili ang isang tiyak na aspect ratio, tulad ng mga imahe, video, at mga layout ng card.

Kung ihahambing sa tradisyonal at masalimuot na mga teknika ng CSS, ang aspect-ratio ay kilala sa pagiging simple at madaling gamitin.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video

`@media` at Tumutugong Disenyo