divකවුළුවේ පළල වෙනස් වන විට එහි පළල / උස වෙනස් කළ හැකි දෙයක් නිර්මාණය කිරීමට මට අවශ්‍යය .

දර්ශන අනුපාතය පවත්වා ගනිමින් පළල අනුව උස වෙනස් කිරීමට ඉඩ දෙන CSS3 නීති තිබේද?

මට මෙය ජාවාස්ක්‍රිප්ට් හරහා කළ හැකි බව මම දනිමි, නමුත් මම කැමති CSS පමණක් භාවිතා කිරීමට ය.

මේ <div>සඳහා ප්‍රතිශත අගයක් සහිත ආවරණයක් සාදන්න padding-bottom:

.demoWrapper {
  padding: 10px;
  background: white;
  box-sizing: border-box;
  resize: horizontal;
  border: 1px dashed;
  overflow: auto;
  max-width: 100%;
  height: calc(100vh - 16px);
}

div {
  width: 100%;
  padding-bottom: 75%;
  background: gold; /** <-- For the demo **/
}

<div class="demoWrapper">
  <div></div>
</div>

එහි ප්‍රති result <div>ලය වනුයේ එහි බහාලුම් පළල 75% ට සමාන උසකින් යුක්ත වේ (4: 3 දර්ශන අනුපාතය).

පෑඩින් කිරීම සඳහා මෙය රඳා පවතී:

ජනනය කරන ලද කොටුවේ අඩංගු කොටසෙහි පළල සම්බන්ධයෙන් ප්‍රතිශතය ගණනය කරනු ලැබේ [...] (ප්‍රභවය: w3.org , අවධාරණය කිරීමේ පතල)

අනෙකුත් දර්ශන අනුපාත සහ 100% පළල සඳහා පෑඩින්-පහළ අගයන්:

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

කොට් in ාශයේ අන්තර්ගතය තැබීම:

කොට් div ාශයේ දර්ශන අනුපාතය තබා ගැනීමට සහ එහි අන්තර්ගතය දිගු කිරීම වලක්වා ගැනීම සඳහා, ඔබ නියත වශයෙන්ම ස්ථානගත කළ දරුවෙකු එකතු කර එය එතීමේ දාරවලට දිගු කළ යුතුය:

div.stretchy-wrapper {
  position: relative;
}

div.stretchy-wrapper > div {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}

මෙන්න නිරූපණයක් සහ තවත් ගැඹුරු නිරූපණයක්

vw ඒකක:

මූලද්රව්යයේ පළල සහ උසvw යන දෙකම සඳහා ඔබට ඒකක භාවිතා කළ හැකිය . දර්ශනපථ පළල මත පදනම්ව මූලද්‍රව්‍යයේ දර්ශන අනුපාතය සංරක්ෂණය කිරීමට මෙය ඉඩ දෙයි.

vw: දර්ශනපථයේ පළලින් 1/100 වන කොටස. [ MDN ]

විකල්පයක් ලෙස, ඔබට vhදර්ශනපථයේ උස සඳහා භාවිතා කළ හැකිය , නැතහොත් vmin/ vmaxදර්ශන පථයේ මානයන්ගෙන් අඩු / වැඩි ප්‍රමාණයක් භාවිතා කිරීමටද හැකිය ( මෙහි සාකච්ඡාව ).

උදාහරණය: 1: 1 දර්ශන අනුපාතය

div {
  width: 20vw;
  height: 20vw;
  background: gold;
}

<div></div>

අනෙකුත් දර්ශන අනුපාත සඳහා, මූලද්‍රව්‍යයේ පළල අනුව උස සඳහා අගය ගණනය කිරීමට ඔබට පහත වගුව භාවිතා කළ හැකිය:

aspect ratio  |  multiply width by
-----------------------------------
     1:1      |         1
     1:3      |         3
     4:3      |        0.75
    16:9      |       0.5625

උදාහරණය: වර්ග බෙදීම් 4x4 ජාලකය

body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
div {
  width: 23vw;
  height: 23vw;
  margin: 0.5vw auto;
  background: gold;
}

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

මෙන්න මෙම නිරූපණය සමඟ ෆිදෙල් එකක් වන අතර සිරස් සහ තිරස් කේන්ද්‍රීය අන්තර්ගතයන් සහිත චතුරස්රවල ප්රතිචාරාත්මක ජාලයක් සෑදීම සඳහා විසඳුමක් මෙන්න .

Vh / vw ඒකක සඳහා බ්‍රව්සර් සහාය IE9 + වැඩි විස්තර සඳහා canIuse බලන්න

CSS භාවිතයෙන් මෙය කිරීමට මම ක්‍රමයක් සොයාගෙන ඇත, නමුත් ඔබේ වෙබ් අඩවියේ ගලායාම අනුව එය වෙනස් විය හැකි බැවින් ඔබ ප්‍රවේශම් විය යුතුය. මගේ වෙබ් අඩවියේ තරල පළල කොටසක නියත දර්ශන අනුපාතයකින් වීඩියෝව කාවැද්දීම සඳහා මම එය කර ඇත්තෙමි.

ඔබට මේ වගේ කාවැද්දූ වීඩියෝවක් ඇති බව පවසන්න:

<object>
     <param ... /><param ... />...
     <embed src="..." ...</embed>
</object>

එවිට ඔබට මේ සියල්ල "වීඩියෝ" පන්තියක් සහිත කොට් within ාශයක් තුළ තැබිය හැකිය. මෙම වීඩියෝ පංතිය බොහෝ විට ඔබේ වෙබ් අඩවියේ ඇති තරල මූලද්‍රව්‍යය වනු ඇත, එයට තනිවම උස සීමාවන් නොමැත, නමුත් ඔබ බ්‍රව්සරයේ ප්‍රමාණය වෙනස් කළ විට එය වෙබ් අඩවියේ ප්‍රවාහයට අනුව පළල වෙනස් වේ. වීඩියෝවේ යම් දර්ශන අනුපාතයක් පවත්වා ගනිමින් ඔබේ කාවැද්දූ වීඩියෝව ලබා ගැනීමට ඔබ උත්සාහ කරන අංගය මෙය විය හැකිය.

මෙය සිදු කිරීම සඳහා, මම "වීඩියෝ" පංතිය තුළ කාවැද්දූ වස්තුව ඉදිරිපිට රූපයක් තැබුවෙමි.

!!! වැදගත් කොටස නම්, ඔබ නඩත්තු කිරීමට බලාපොරොත්තු වන නිවැරදි දර්ශන අනුපාතය රූපයේ තිබීමයි. තවද, ඔබේ පිරිසැලසුම මත පදනම්ව වීඩියෝව (හෝ ඔබ AR හි නඩත්තු කරන ඕනෑම දෙයක්) ලබා ගැනීමට ඔබ අපේක්ෂා කරන කුඩාම ප්‍රමාණයට වඩා විශාලත්වයේ විශාලත්වය ඇති බවට වග බලා ගන්න. ප්‍රතිබිම්බය ප්‍රතිනිර්මාණය කළ විට රූපය නිරාකරණය කිරීමේදී ඇතිවිය හැකි ගැටළු වළක්වා ගත හැකිය. උදාහරණයක් ලෙස, ඔබට දර්ශන අනුපාතය 3: 2 පවත්වා ගැනීමට අවශ්‍ය නම්, 3px by 2px රූපයක් භාවිතා නොකරන්න. එය සමහර තත්වයන් යටතේ ක්‍රියාත්මක විය හැකි නමුත් මම එය අත්හදා බලා නැති අතර එය වළක්වා ගැනීම හොඳ අදහසක් වනු ඇත.

ඔබේ වෙබ් අඩවියේ තරල මූලද්‍රව්‍ය සඳහා අර්ථ දක්වා ඇති අවම පළලක් ඔබට දැනටමත් තිබිය යුතුය. එසේ නොවේ නම්, බ්‍රවුසර කවුළුව ඉතා කුඩා වූ විට මූලද්‍රව්‍ය කපා හැරීම හෝ අතිච්ඡාදනය වීම වළක්වා ගැනීම සඳහා එසේ කිරීම හොඳ අදහසකි. යම් අවස්ථාවක අනුචලන තීරුවක් තිබීම වඩා හොඳය. වෙබ් පිටුවකට ලැබිය යුතු කුඩාම පළල p 600px (ඕනෑම ස්ථාවර පළල තීරු ද ඇතුළුව) පමණ වේ. මන්ද ඔබ දුරකථන හිතකාමී අඩවි සමඟ ගනුදෙනු කරන්නේ නම් මිස තිර විභේදනය කුඩා නොවේ. !!!

මම සම්පූර්ණයෙන්ම විනිවිද පෙනෙන png එකක් භාවිතා කරමි, නමුත් ඔබ එය නිවැරදිව කළහොත් එය වැදගත් යැයි මම නොසිතමි. මෙවැනි:

<div class="video">
     <img class="maintainaspectratio" src="maintainaspectratio.png" />
     <object>
          <param ... /><param ... />...
          <embed src="..." ...</embed>
     </object>
</div>

දැන් ඔබට පහත සඳහන් දේට සමාන CSS එකතු කිරීමට හැකි විය යුතුය:

div.video { ...; position: relative; }
div.video img.maintainaspectratio { width: 100%; }
div.video object { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
div.video embed {width: 100%; height: 100%; }

වස්තුව තුළ ඇති පැහැදිලි උස හෝ පළල ප්‍රකාශය ඉවත් කිරීමට වග බලා ගන්න සහ සාමාන්‍යයෙන් පිටපත් / අලවන ලද කාවැද්දූ කේත සමඟ එන ටැග් ඇතුළත් කරන්න.

එය ක්‍රියා කරන ආකාරය රඳා පවතින්නේ වීඩියෝ පන්තියේ මූලද්‍රව්‍යයේ පිහිටුම් ගුණාංග සහ ඔබට අවශ්‍ය අයිතමය යම් දර්ශන අනුපාතයක් පවත්වා ගෙන යාම මත ය. මූලද්‍රව්‍යයක ප්‍රමාණය වෙනස් කළ විට රූපයක් එහි නියම දර්ශන අනුපාතය පවත්වා ගෙන යන ආකාරයෙන් එය ප්‍රයෝජන ගනී. වීඩියෝ පංතියේ මූලද්‍රව්‍යයේ ඇති වෙනත් ඕනෑම දෙයක් ගතික රූපය මඟින් සපයනු ලබන දේපල වෙළඳාම් වලින් උපරිම ප්‍රයෝජන ගැනීමට එහි පළල / උස 100% දක්වා බල කිරීම මඟින් වීඩියෝ පන්තියේ මූලද්‍රව්‍යය රූපයෙන් සකසා ඇත.

නියමයි, එහ්?

එය ඔබේම නිර්මාණයක් සමඟ වැඩ කිරීමට ඔබට එය සමඟ ටිකක් සෙල්ලම් කිරීමට සිදු විය හැකිය, නමුත් මෙය ඇත්තෙන්ම මට පුදුම සහගත ලෙස ක්‍රියා කරයි. පොදු සංකල්පය තිබේ.

මෙම විසඳුම සඳහා එලියට් මාව පෙලඹුවා - ස්තූතියි:

aspectratio.png මගේ නඩුවේ පික්සල් 30x10, ඔබ කැමති දර්ශන අනුපාතයේ ප්‍රමාණයෙන් සම්පූර්ණයෙන්ම විනිවිද පෙනෙන PNG ගොනුවකි.

HTML

<div class="eyecatcher">
  <img src="/img/aspectratio.png"/>
</div>

CSS3

.eyecatcher img {
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../img/autoresized-picture.jpg);
}

කරුණාකර සටහන් කරන්න: background-size ඔබේ ඉලක්ක-බ්‍රව්සර් සමඟ ක්‍රියා නොකරන css3 විශේෂාංගයකි. ඔබට අන්තර් ක්‍රියාකාරිත්වය පරීක්ෂා කළ හැකිය (fe on caniuse.com ).

සහ භාවිතා කරමින් හොඳ විසඳුමක් සඳහා මම පැකිලී ගියෙමි .<svg>display:grid

ග්‍රිඩ් මූලද්‍රව්‍යය මඟින් මූලද්‍රව්‍ය දෙකක් (හෝ වැඩි ගණනක්) සහිත එකම ඉඩක් ලබා ගැනීමට ඔබට ඉඩ සලසයි. ඒ කියන්නේ කොටුවෙන් පිටත උස එක අනුපාතය නියම කරයි .

මෙයින් අදහස් කරන්නේ සමස්ත "අනුපාතය" පිරවීම සඳහා අන්තර්ගතය කිසි විටෙකත් උස නොවන බව ඔබ දන්නා විට ඔබට එය භාවිතා කළ හැකි අතර ඔබ හුදෙක් මෙම අවකාශයේ අන්තර්ගතය ස්ථානගත කිරීමට ක්‍රමයක් සොයමින් සිටී (එනම් එය දෙපැත්තටම කේන්ද්‍රගත කිරීම සඳහා භාවිතා කරයි display:flex; align-items:center; justify-content:center).
එය විනිවිද පෙනෙන ලෙස එම එච්චරමයි දෙයක් <img>සමග display:blockඑම හැර, සහ කලින් තීරණය අනුපාතය <svg>වෙනස් කිරීමට වඩ වඩා සැලකිය යුතු ලෙස වඩා පහසු කුමක් ද? (Responsively අනුපාතය වෙනස් කිරීමට, ඔබට අවශ්ය යුතුය).

<div class="ratio">
  <svg viewBox="0 0 1 1"></svg>
  <div>
    I'm square
  </div>
</div>

.ratio {
  display: grid;
}
.ratio > * {
  grid-area: 1/1/2/2;
}

ඔබ කළ යුත්තේ <svg>s අනුපාතය වෙනස් කිරීම පමණි :

• <svg viewBox="0 0 4 3"></svg>
• <svg viewBox="0 0 16 9"></svg>

එය ක්‍රියාත්මක වන ආකාරය බලන්න:

.ratio {
  display: grid;
}
.ratio > * {
  grid-area: 1/1/2/2;
}

/* below code NOT needed for setting the ratio 
 * I just wanted to mark it visually
 * and center contents
 */
.ratio div {
  border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="ratio">
  <svg viewBox="0 0 7 1"></svg>
  <div>
    Fixed ratio 7:1
  </div>
</div>

අන්තර්ගත මූලද්‍රව්‍යය උස වන විට අනුපාතය සැකසීමට ඉඩ නොදෙන විසඳුමක් ඔබට අවශ්‍ය නම් (පිටාර ගැලීම හෝ ස්වයංක්‍රීයව), ඔබට අවශ්‍ය වන්නේ position:relativeමව් ජාලයට සහ position:absolute; height:100%; overflow-y: auto;අන්තර්ගතයට <svg>සැකසීම පමණි, එමඟින් ප්‍රමාණය සැකසීමට ඉඩ දෙයි , එබැවින් අනුපාතය. උදාහරණයක්:

.ratio {
  display: grid;
  position: relative;
}
.ratio > * {
  grid-area: 1/1/2/2;
}


.ratio > div {
  height: 100%;
  overflow-y: auto;
  position: absolute;
  
  /* the rest is not needed */
  border: 1px solid red;
  padding: 0 1rem;
}

<div class="ratio">
  <svg viewBox="0 0 7 1"></svg>
  <div>
    <h1>Fixed ratio 7:1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A scelerisque purus semper eget. Sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. A cras semper auctor neque vitae tempus quam pellentesque nec. Morbi enim nunc faucibus a pellentesque sit amet porttitor. Arcu odio ut sem nulla. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque. Cras tincidunt lobortis feugiat vivamus at augue eget. Laoreet sit amet cursus sit amet. Amet nulla facilisi morbi tempus iaculis urna id volutpat. Leo in vitae turpis massa sed elementum tempus egestas sed. Egestas integer eget aliquet nibh. Dolor sit amet consectetur adipiscing elit.

<p>Ut aliquam purus sit amet. Eget magna fermentum iaculis eu non diam phasellus vestibulum. Diam in arcu cursus euismod quis viverra nibh. Nullam vehicula ipsum a arcu cursus vitae congue. Vel orci porta non pulvinar neque laoreet suspendisse. At tellus at urna condimentum mattis pellentesque. Tristique senectus et netus et malesuada. Vel pretium lectus quam id leo in. Interdum velit euismod in pellentesque. Velit euismod in pellentesque massa placerat duis. Vitae suscipit tellus mauris a diam maecenas sed enim.

<p>Mauris a diam maecenas sed enim ut sem. In hendrerit gravida rutrum quisque. Amet dictum sit amet justo donec enim diam. Diam vulputate ut pharetra sit amet aliquam id. Urna porttitor rhoncus dolor purus non enim praesent. Purus in massa tempor nec feugiat nisl pretium. Sagittis vitae et leo duis ut. Facilisi nullam vehicula ipsum a arcu cursus vitae congue mauris. Volutpat odio facilisis mauris sit amet massa vitae tortor condimentum. Aliquam purus sit amet luctus venenatis lectus magna. Sit amet purus gravida quis blandit turpis. Enim eu turpis egestas pretium aenean. Consequat mauris nunc congue nisi. Nunc sed id semper risus in hendrerit gravida rutrum. Ante metus dictum at tempor. Blandit massa enim nec dui nunc mattis enim ut.
  </div>
</div>

Web_Designer ගේ පිළිතුරට එකතු කිරීම සඳහා, එහි මූලද්‍රව්‍ය අඩංගු<div> පළලෙන් 75% ක උසකින් (සම්පූර්ණයෙන්ම පහළ පෑඩින් වලින් සෑදී ඇත) . මෙන්න හොඳ සාරාංශයක්: http://mattsnider.com/css-using-percent-for-margin-and-padding/ . මෙය එසේ විය යුත්තේ මන්දැයි මට විශ්වාස නැත, නමුත් එය එසේ ය.

ඔබේ කොට් 100 ාශය 100% ට වඩා පළලක් වීමට අවශ්‍ය නම්, පළල සැකසීමට ඔබට තවත් ඔතා බෙදීමක් අවශ්‍ය වේ:

div.ar-outer{
    width: 60%; /* container; whatever width you want */
    margin: 0 auto; /* centered if you like */
}
div.ar {
    width:100%; /* 100% of width of container */
    padding-bottom: 75%; /* 75% of width of container */
    position:relative;
}
div.ar-inner {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}

උපාංග විභේදනය අනුව වෙනස් ලාංඡන ගොනුවක් සේවය කිරීම සඳහා CSS මාධ්‍ය විමසුම් භාවිතා කිරීමට මට ඉඩ දීම සඳහා මම මෑතකදී එලියට්ගේ රූප උපක්‍රමයට සමාන දෙයක් භාවිතා කළෙමි, නමුත් <img>ස්වාභාවිකවම සිදු වන ආකාරයට සමානුපාතිකව පරිමාණය කරන්න (මම ලාංඡනය පසුබිම් රූපයක් ලෙස විනිවිද පෙනෙන ලෙස සකසා ඇත .png නිවැරදි දර්ශන අනුපාතය සමඟ). නමුත් Web_Designer ගේ විසඳුම මට http ඉල්ලීමක් ඉතිරි කරයි.

@ වෙබ් 'ටිකී' ලෙස මේ වන විටත් භාවිතා කිරීමට ක්රමයක් පෙන්වන්න vh/ vw, මම ද තිරයේ මධ්යස්ථානය කිරීමට ක්රමයක් අවශ්ය, මෙහි සඳහා ඇබිත්ත කේතය 9:16 රූපයකි.

.container {
  width: 100vw;
  height: calc(100vw * 16 / 9);
  transform: translateY(calc((100vw * 16 / 9 - 100vh) / -2));
}

translateYමෙම මධ්‍යස්ථානය තිරයේ තබා ගනී. calc(100vw * 16 / 9)9/16 සඳහා අපේක්ෂිත උස. (100vw * 16 / 9 - 100vh)පිටාර ගැලීමේ උස, එබැවින් ඉහළට අදින්නoverflow height/2 එය තිරය මත කේන්ද්‍රගතව තබයි.

භූ දර්ශනය සඳහා, සහ 16: 9 තබා ගන්න , ඔබ භාවිතය පෙන්වයි

.container {
  width: 100vw;
  height: calc(100vw * 9 / 16);
  transform: translateY(calc((100vw * 9 / 16 - 100vh) / -2));
}

අනුපාතය 9/16, පූර්ව නිශ්චිත කිසිදු අවශ්යතාවයක් වෙනස් පහසුවෙන් වේ 100:56.25හෝ 100:75ඔබ මුලින්ම උස සහතික කිරීම සඳහා අවශ්ය නම්, ඔබ, පළල හා උස මාරු කළ යුතු, උදා:height:100vh;width: calc(100vh * 9 / 16) 9:16 චිත්රයක් සඳහා.

ඔබට විවිධ තිර ප්‍රමාණයට අනුවර්තනය වීමට අවශ්‍ය නම්, ඔබ ද උනන්දු විය හැකිය

• පසුබිම් ප්‍රමාණය ආවරණය / අඩංගු
  • ඉහත ශෛලිය අඩංගු වීමට සමාන ය, පළල මත රඳා පවතී: උස අනුපාතය.
• වස්තු-යෝග්‍යතාව
  • ආවරණය / අන්තර්ගතය img / වීඩියෝ ටැගය සඳහා
• @media (orientation: portrait)/@media (orientation: landscape)
  • අනුපාතය වෙනස් කිරීමට portrait/ landscapeවෙනස් කිරීමට මාධ්‍ය විමසුම .

W3schools.com හි මෙහි දක්වා ඇති පරිදි සහ මෙම පිළිගත් පිළිතුරෙහි තරමක් පුනරුච්චාරණය කර ඇති පරිදි , පෑඩින් අගයන් ප්‍රතිශතයක් ලෙස (අවධාරණය මගේ):

අඩංගු මූලද්‍රව්‍යයේ පළලෙන් ප්‍රතිශතයක් ලෙස පෑඩින් කිරීම නියම කරයි

16: 9 දර්ශන අනුපාතය තබා ගන්නා ප්‍රතිචාරාත්මක DIV හි නිවැරදි උදාහරණය වන Ergo පහත පරිදි වේ:

CSS

.parent {
    position: relative;
    width: 100%;
}
.child {
    position: relative;
    padding-bottom: calc(100% * 9 / 16);
}
.child > div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

HTML

<div class="parent">
    <div class="child">
        <div>Aspect is kept when resizing</div>
    </div>
</div>

JSFiddle හි නිරූපණය

මෙය පිළිගත් පිළිතුරෙහි වැඩිදියුණු කිරීමකි:

• එතීෙම් බෙදීම් වෙනුවට ව්‍යාජ මූලද්‍රව්‍ය භාවිතා කරයි
• දර්ශන අනුපාතය එහි මවුපියන් වෙනුවට කොටුවේ පළල මත පදනම් වේ
• අන්තර්ගතය උස වූ විට කොටුව සිරස් අතට විහිදේ

.box {
  margin-top: 1em;
  margin-bottom: 1em;
  background-color: #CCC;
}

.fixed-ar::before {
  content: "";
  float: left;
  width: 1px;
  margin-left: -1px;
}
.fixed-ar::after {
  content: "";
  display: table;
  clear: both;
}

.fixed-ar-16-9::before {
  padding-top: 56.25%;
}
.fixed-ar-3-2::before {
  padding-top: 66.66%;
}
.fixed-ar-4-3::before {
  padding-top: 75%;
}
.fixed-ar-1-1::before {
  padding-top: 100%;
}

.width-50 {
  display: inline-block;
  width: 50%;
}
.width-20 {
  display: inline-block;
  width: 20%;
}

<div class="box fixed-ar fixed-ar-16-9">16:9 full width</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-50">16:9</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-20">16:9</div>
<div class="box fixed-ar fixed-ar-3-2 width-20">3:2</div>
<div class="box fixed-ar fixed-ar-4-3 width-20">4:3</div>
<div class="box fixed-ar fixed-ar-1-1 width-20">1:1</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-20">16:9</div>
<div class="box fixed-ar fixed-ar-16-9 width-50">16:9</div>

ඔබට svg භාවිතා කළ හැකිය. කන්ටේනරය / එතීමේ පිහිටීම සාපේක්ෂ කරන්න, svg පළමුව ස්ථිතිකව ස්ථානගත කර පසුව සම්පූර්ණයෙන්ම ස්ථානගත කර ඇති අන්තර්ගතය තබන්න (ඉහළ: 0; වමේ: 0; දකුණ: 0; පහළ: 0;)

16: 9 සමානුපාතිකයන් සහිත උදාහරණය:

image.svg: (src හි පේළිගත කළ හැකිය)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 9" width="16" height="9"/>

CSS:

.container {
  position: relative;
}
.content {
  position: absolute;
  top:0; left:0; right:0; bottom:0;
}

HTML:

<div class="container">
  <img style="width: 100%" src="image.svg" />
  <div class="content"></div>
</div>

Inline svg වැඩ කරන බවක් නොපෙනෙන බව සලකන්න, නමුත් ඔබට svg urlencode කර img src ගුණාංගයට ඇතුළත් කළ හැකිය:

<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%209%22%20width%3D%2216%22%20height%3D%229%22%2F%3E" style="width: 100%;" />

ඔබේ විසඳුම් මත පදනම්ව මම යම් උපක්‍රමයක් කර ඇත:

ඔබ එය භාවිතා කරන විට, ඔබේ HTML පමණක් වනු ඇත

<div data-keep-ratio="75%">
    <div>Main content</div>
</div>

මේ ආකාරයෙන් එය භාවිතා කිරීම සඳහා: CSS:

*[data-keep-ratio] {
    display: block;
    width: 100%;
    position: relative;
}
*[data-keep-ratio] > * {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

සහ js (jQuery)

$('*[data-keep-ratio]').each(function(){ 
    var ratio = $(this).data('keep-ratio');
    $(this).css('padding-bottom', ratio);
});

මෙය තිබීම ඔබ data-keep-ratioඋස / පළල සඳහා attr සකසා ඇති අතර එය එයයි.

මගේ නඩුවේ හොඳම විසඳුම SCSS ය; දත්ත ලක්ෂණයක් භාවිතා කිරීම:

[data-aspect-ratio] {
    display: block;
    max-width: 100%;
    position: relative;

    &:before {
        content: '';
        display: block;
    }

    > * {
        display: block;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }
}
[data-aspect-ratio="3:1"]:before {
    padding-top: 33.33%;
}
[data-aspect-ratio="2:1"]:before {
    padding-top: 50%;
}
[data-aspect-ratio="16:9"]:before {
    padding-top: 56.25%;
}
[data-aspect-ratio="3:2"]:before {
    padding-top: 66.66%;
}
[data-aspect-ratio="4:3"]:before {
    padding-top: 75%;
}
[data-aspect-ratio="1:1"]:before {
    padding-top: 100%;
}
[data-aspect-ratio="3:4"]:before {
    padding-top: 133.33%;
}
[data-aspect-ratio="2:3"]:before {
    padding-top: 150%;
}
[data-aspect-ratio="9:16"]:before {
    padding-top: 177.77%;
}
[data-aspect-ratio="1:2"]:before {
    padding-top: 200%;
}
[data-aspect-ratio="1:3"]:before {
    padding-top: 300%;
}

උදාහරණයක් වශයෙන් :

<div data-aspect-ratio="16:9"><iframe ...></iframe></div>

මූලාශ්රය

බොහෝ පිළිතුරු ඉතා සිසිල් වුවත්, ඒවායින් බොහොමයක් දැනටමත් නිවැරදිව ප්‍රමාණයේ රූපයක් තිබීම අවශ්‍ය වේ ... වෙනත් විසඳුම් පළල සඳහා පමණක් ක්‍රියා කරන අතර පවතින උස ගැන තැකීමක් නොකරයි, නමුත් සමහර විට ඔබට යම් උසකට අන්තර්ගතය ගැලපීමට අවශ්‍ය වේ .

සම්පුර්ණයෙන්ම අතේ ගෙන යා හැකි සහ නැවත ප්‍රමාණ කළ හැකි විසඳුමක් ගෙන ඒම සඳහා මම ඔවුන් දෙදෙනා එකට එක් කිරීමට උත්සාහ කර ඇත්තෙමි ... උපක්‍රමය නම් රූපයක් ස්වයංක්‍රීයව පරිමාණය කිරීම සඳහා භාවිතා කිරීමයි, නමුත් පෙර විදැහුම් කරන ලද රූපයක් හෝ ඕනෑම ආකාරයක භාවිතා කිරීම වෙනුවට පේළිගත එස්.වී.ජී. දෙවන HTTP ඉල්ලීම ...

div.holder{
  background-color:red;
  display:inline-block;
  height:100px;
  width:400px;
}
svg, img{
  background-color:blue;
  display:block;
  height:auto;
  width:auto;
  max-width:100%;
  max-height:100%;
}
.content_sizer{
  position:relative;
  display:inline-block;
  height:100%;
}
.content{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background-color:rgba(155,255,0,0.5);
}

<div class="holder">
  <div class="content_sizer">
    <svg width=10000 height=5000 />
    <div class="content">
    </div>
  </div>
</div>

SVG හි පළල සහ උස ගුණාංගවල මම විශාල අගයන් භාවිතා කර ඇති බව සලකන්න, එය හැකිලීමට හැකි බැවින් උපරිම අපේක්ෂිත ප්‍රමාණයට වඩා විශාල විය යුතුය. උදාහරණයෙන් div හි අනුපාතය 10: 5 වේ

ඔබට බෙදීම් 2 ක් ඇති බව කියමු. පිටත කොටස බහාලුමක් වන අතර අභ්‍යන්තරය එහි අනුපාතය පවත්වා ගැනීමට අවශ්‍ය ඕනෑම අංගයක් විය හැකිය (img හෝ youtube iframe හෝ වෙනත්)

html මේ වගේ:

<div class='container'>
  <div class='element'>
  </div><!-- end of element -->

"මූලද්‍රව්‍යයේ" අනුපාතය ඔබ තබා ගත යුතු යැයි කියමු

අනුපාතය => 4 සිට 1 දක්වා හෝ 2 සිට 1 දක්වා ...

css මේ වගේ

.container{
  position: relative;
  height: 0
  padding-bottom : 75% /* for 4 to 3 ratio */ 25% /* for 4 to 1 ratio ..*/

}

.element{
  width : 100%;
  height: 100%;
  position: absolute; 
  top : 0 ;
  bottom : 0 ;
  background : red; /* just for illustration */
}

පෑඩින්% හි නිශ්චිතව දක්වා ඇති විට එය ගණනය කරනු ලබන්නේ පළල නොව උස මතය. .. එබැවින් මූලික වශයෙන් ඔබ ඔබේ පළල කොපමණ උසකින් යුක්තද යන්න ගැටළුවක් නොවේ. එය අනුපාතය තබා ගනී.

මම මෙම ගැටලුවට කිහිප වතාවක්ම මුහුණ දී ඇති බැවින් මම ඒ සඳහා JS විසඳුමක් ඉදිරිපත් කළෙමි. මෙය මූලික වශයෙන් ඔබ නියම කරන අනුපාතය අනුව මූලද්‍රව්‍යයේ පළල අනුව domElement හි උස වෙනස් කරයි. ඔබට එය පහත පරිදි භාවිතා කළ හැකිය:

<div ratio="4x3"></div>

එය මූලද්‍රව්‍යයේ උස සකසන බැවින් මූලද්‍රව්‍යය a display:blockහෝ display:inline-blockවිය යුතු බව කරුණාවෙන් සලකන්න .

https://github.com/JeffreyArts/html-ratio-component

ඔබට පෝට්රේට් හෝ භූ දර්ශන දර්ශනය මත දර්ශන කොටුව තුළ චතුරස්රයක් සවි කිරීමට අවශ්‍ය නම් (හැකි තරම් විශාල, නමුත් කිසිවක් පිටත ඇලී නැත), භාවිතා කිරීම vw/ vhදිශානතිය අතර මාරු වන්න portrait/ landscape:

@media (orientation:portrait ) {
  .square {
    width :100vw;
    height:100vw;
  }
} 
@media (orientation:landscape) {
  .square {
    width :100vh;
    height:100vh;
  }
} 

මගේ විසඳුම බෙදා ගැනීමට මම කැමතියි, එහිදී මට imgනිශ්චිත දර්ශන අනුපාතයක් පුරවන ටැග් එකක් තිබේ. backgroundCMS හි සහය නොමැතිකම නිසා මට භාවිතා කළ නොහැකි වූ අතර මම එවැනි විලාසිතාවක් භාවිතා කිරීමට කැමති නොවෙමි : <img style="background:url(...)" />. එසේම, පළල 100% ක් වන බැවින් සමහර විසඳුම්වල මෙන් එය ස්ථාවර ප්‍රමාණයකට සැකසීමට අවශ්‍ය නොවේ. එය ප්‍රතිචාරාත්මකව පරිමාණය කරනු ඇත!

.wrapper {
  width: 50%;
}

.image-container {
  position: relative;
  width: 100%;
}

.image-container::before {
  content: "";
  display: block;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ratio-4-3::before {
  padding-top: 75%;
}

.ratio-3-1::before {
  padding-top: calc(100% / 3);
}

.ratio-2-1::before {
  padding-top: 50%;
}

<div class="wrapper"> <!-- Just to make things a bit smaller -->
  <p>
  Example of an 4:3 aspect ratio, filled by an image with an 1:1 ratio.
  </p>
  <div class="image-container ratio-4-3"> <!-- Lets go for a 4:3 aspect ratio -->
    <img src="https://placekitten.com/1000/1000/" alt="Kittens!" />
  </div>
  <p>
  Just place other block elements around it; it will work just fine.
  </p>
</div>

SVG භාවිතා කිරීමෙන් ඔබට එය සාක්ෂාත් කරගත හැකිය.

එය නඩුවක් මත රඳා පවතී, නමුත් සමහර ඒවා ඇත්තෙන්ම ප්‍රයෝජනවත් වේ. උදාහරණයක් ලෙස - ඔබට background-imageස්ථාවර උසකින් තොරව සැකසිය හැකිය හෝ <iframe>අනුපාතය 16:9සහ position:absoluteයනාදිය සමඟ යූ ටියුබ් කාවැද්දීමට එය භාවිතා කළ හැකිය.

සඳහා 3:2අනුපාතය කට්ටලයක් viewBox="0 0 3 2"හා එසේ.

උදාහරණයක්:

div{
    background-color:red
}
svg{
    width:100%;
    display:block;
    visibility:hidden
}

.demo-1{width:35%}
.demo-2{width:20%}

<div class="demo-1">
  <svg viewBox="0 0 3 2"></svg>
</div>

<hr>

<div class="demo-2">
  <svg viewBox="0 0 3 2"></svg>
</div>

හොඳයි, අපට මෑතකදී aspect-ratioCSS හි දේපල භාවිතා කිරීමේ හැකියාව ලැබුණි .

https://twitter.com/Una/status/1260980901934137345/photo/1

සටහන: සහාය තවමත් හොඳම නොවේ ...

https://caniuse.com/#search=aspect-ratio

2020 විසඳුම - ව්‍යාජ මූලද්‍රව්‍යයේ ග්‍රිඩ් සහ පෑඩින් භාවිතා කිරීම

මෙම නඩුව විසඳීම සඳහා තවත් නැවුම් ක්‍රමයක් මම සොයාගෙන ඇත. මෙම විසඳුම ඕනෑම padding-bottomක්‍රමයකින් පැවත එන්නකි , නමුත් position: absoluteදරුවන් නොමැතිව , හුදෙක් display: grid;මූලද්‍රව්‍ය භාවිතා කිරීම සහ ව්‍යාජ මූලද්‍රව්‍යය.

මෙන්න අපට .ratio::beforeහොඳ පැරණි padding-bottom: XX%හා grid-area: 1 / 1 / 1 / 1;ව්‍යාජ මූලද්‍රව්‍යයක් ජාලකයේ තබා ගැනීමට බල කරයි. මෙහි දී width: 0;ප්‍රධාන මූලද්‍රව්‍යය පිටාර ගැලීම වැළැක්විය යුතු වුවද (අපි සීතල භාවිතා කරමුz-index මෙහි , නමුත් මෙය කෙටි වේ).

අපගේ ප්‍රධාන මූලද්‍රව්‍යයට .ratio > *:first-childසමාන ස්ථානයක් ඇත .ratio::before, එනම් grid-area: 1 / 1 / 1 / 1;ඔවුන් දෙදෙනාම එකම ජාලක සෛල ස්ථානයක් බෙදා ගනී. දැන් අපට අපගේ අන්තර්ගතය තුළ ඕනෑම අන්තර්ගතයක් තැබිය හැකි අතර පළල / උස අනුපාතය තීරණය කරන්නේ ව්‍යාජ මූලද්‍රව්‍යයයි. ජාලක ප්‍රදේශය ගැන වැඩි විස්තර .

.ratio {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 200px; /* just for instance, can be 100% and depends on parent */  
}

.ratio::before {
  content: '';
  width: 0;
  padding-bottom: calc(100% / (16/9)); /* here you can place any ratio */
  grid-area: 1 / 1 / 1 / 1;
}

.ratio>*:first-child {
  grid-area: 1 / 1 / 1 / 1; /* the same as ::before */
  background: rgba(0, 0, 0, 0.1); /* just for instance */
}

<div class="ratio">
  <div>16/9</div>
</div>

ඔබට CSS අගය භාවිතා කළ හැකි වුවද, ඔබේ අනුපාතය HTML හි styleගුණාංගය භාවිතා කරන්න . සමඟ ද display: inline-gridක්‍රියා කරයි.

.ratio {
  display: inline-grid;
  grid-template-columns: 1fr;
  width: 200px; /* just for instance, can be 100% and depends on parent */ 
  margin-right: 10px; /* just for instance */
}

.ratio::before {
  content: '';
  width: 0;
  padding-bottom: calc(100% / (var(--r))); /* here you can place any ratio */
  grid-area: 1 / 1 / 1 / 1;
}

.ratio>*:first-child {
  grid-area: 1 / 1 / 1 / 1; /* the same as ::before */
  background: rgba(0, 0, 0, 0.1); /* just for instance */
}

<div class="ratio" style="--r: 4/3;">
  <div>4/3</div>
</div>

<div class="ratio" style="--r: 16/9;">
  <div>16/9</div>
</div>

අදහසක් හෝ කඩුල්ලක් පමණි.

div {
  background-color: blue;
  width: 10%;
  transition: background-color 0.5s, width 0.5s;
  font-size: 0;
}

div:hover {
  width: 20%;
  background-color: red;
}
  
img {
  width: 100%;
  height: auto;
  visibility: hidden;
}

<div>
  <!-- use an image with target aspect ratio. sample is a square -->
  <img src="http://i.imgur.com/9OPnZNk.png" />
</div>

කැන්වස් මූලද්‍රව්‍යය භාවිතා කරමින් දර්ශන අනුපාතය පවත්වා ගැනීමේ සරල ක්‍රමයක්.

එය ක්‍රියාකාරීව දැකීමට පහත කොටස ප්‍රතිප්‍රමාණනය කිරීමට උත්සාහ කරන්න.

මට නම්, මෙම ප්‍රවේශය වඩාත් හොඳින් ක්‍රියාත්මක විය, එබැවින් මම එය අන් අය සමඟ බෙදා ගන්නෙමි, එවිට ඔවුන්ටද එයින් ප්‍රයෝජන ගත හැකිය.

.cont {
  border: 5px solid blue;
  position: relative;
  width: 300px;
  padding: 0;
  margin: 5px;
  resize: horizontal;
  overflow: hidden;
}

.ratio {
  width: 100%;
  margin: 0;
  display: block;
}

.content {
  background-color: rgba(255, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

<div class="cont">
  <canvas class="ratio" width="16" height="9"></canvas>
  <div class="content">I am 16:9</div>
</div>

ගතික උස සමඟ ද ක්‍රියා කරයි!

.cont {
  border: 5px solid blue;
  position: relative;
  height: 170px;
  padding: 0;
  margin: 5px;
  resize: vertical;
  overflow: hidden;
  display: inline-block; /* so the div doesn't automatically expand to max width */
}

.ratio {
  height: 100%;
  margin: 0;
  display: block;
}

.content {
  background-color: rgba(255, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

<div class="cont">
  <canvas class="ratio" width="16" height="9"></canvas>
  <div class="content">I am 16:9</div>
</div>

පළල: 100px සහ උස: 50px (එනම් 2: 1) පවත්වා ගැනීමට ඔබ කැමති බව පවසන්න (මෙම ගණිතය කරන්න:

.pb-2to1 {
  padding-bottom: calc(50 / 100 * 100%); // i.e., 2:1
}

මම නව විසඳුමක් භාවිතා කළා.

.squares{
  width: 30vw
  height: 30vw

ප්‍රධාන දර්ශන අනුපාතයට

.aspect-ratio
  width: 10vw
  height: 10vh

කෙසේ වෙතත්, මෙය සමස්ත දර්ශන තලයට සාපේක්ෂව වේ. එබැවින්, ඔබට දර්ශන පථයේ පළලින් 30% ක් අවශ්‍ය වන අතර, ඒ වෙනුවට ඔබට 30vw භාවිතා කළ හැකි අතර, පළල ඔබ දන්නා බැවින්, ඔබ ඒවා උසින් නැවත කැල්ක් සහ vw ඒකකය භාවිතා කරයි.

ඔබට ප්‍රවාහ සැකැස්ම (FWD) භාවිතා කළ හැකිය.

https://en.wikipedia.org/wiki/Adaptive_web_design

එය පිරිසැලසුම පරිමාණයෙන් හා නඩත්තු කරනු ඇත, එය තරමක් සංකීර්ණ නමුත් (RWD) වැනි අන්තර්ගතයන් තල්ලු නොකර පිටුවක ප්‍රමාණය වෙනස් කිරීමට ඉඩ දෙයි.

එය ප්‍රතිචාර දක්වන බවක් පෙනේ, නමුත් එය පරිමාණයකි. https://www.youtube.com/watch?v=xRcBMLI4jbg

ඔබට CSS පරිමාණ සූත්‍රය මෙතැනින් සොයාගත හැකිය:

http://plugnedit.com/pnew/928-2/

විකල්ප ස්ථාවර ආන්තිකයන් සහිත අංශයක් මත ආලේඛ්‍ය හෝ භූ දර්ශනයේ 16: 9 දර්ශන අනුපාතයක් පවත්වා ගැනීම සඳහා මගේ විසඳුම මෙන්න.

එය පළල / උස සහ උපරිම පළල / උපරිම උස ගුණාංග vw ඒකක සමඟ සංයෝජනයකි.

මෙම නියැදියේදී, 50px ඉහළ සහ පහළ ආන්තිකයන් හෝවර් මත එකතු කරනු ලැබේ.

html {
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.fixedRatio {
  max-width: 100vw;
  max-height: calc(9 / 16 * 100vw);
  width: calc(16 / 9 * 100vh);
  height: 100vh;
  
  /* DEBUG */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: blue;
  font-size: 2rem;
  font-family: 'Arial';
  color: white;
  transition: width 0.5s ease-in-out, height 0.5s ease-in-out; 
}

.fixedRatio:hover {
  width: calc(16 / 9 * (100vh - 100px));
  height: calc(100vh - 100px);
}

<div class='container'>
  <div class='fixedRatio'>
    16:9
  </div>
</div>

JSFiddle හි නිරූපණය