Способы CSS для создания фиксированного соотношения сторон - пример html js css



Книга Способы CSS для создания фиксированного соотношения сторон

Способы CSS для создания фиксированного соотношения сторон (HTML код)


<h1>Common CSS ways to do Aspect Ratio <span>(on the YouTube Iframe)</span></h1>
<ul>
  <li>
      <h2>Padding Hack</h2>
      <div class="padding-hack">
        <iframe src="https://www.youtube.com/embed/zOZju-Z6J2M" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <code>
.padding-hack {
  position: relative;
  width: 31vw;
  padding-top: 56.25%; 
  /* calculating 16/9 ratio --- 9 / 16 * 100% = 56.25% */
}

.padding-hack iframe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0; 
  right: 0;
  width: 100%;
  height: 100%;
}
    </code>
  </li>
  <li class="">
    <h2>Viewport width solution</h2>
      <iframe class="vw-solution" src="https://www.youtube.com/embed/SlsEwC751UU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 
    <code>
.vw-solution {
  width: 31vw;
  height: 17.4375vw; 
  /* calculating 16/9 ratio ---- 31vw / 16 * 9 = 17.4375vw */
} 
    </code>
  </li>
  <li>
    <h2>Aspect-ratio new CSS property</h2>
    <iframe class="aspect-ratio" src="https://www.youtube.com/embed/3g6oS0VL2zg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <code>
.aspect-ratio {
  width: 31vw;
  aspect-ratio: 16 / 9;
  /* aspect-ratio auto calculating 16/9 ratio */
}
    </code>
  </li>
</ul>
  
  <script src='https://assets.codepen.io/65740/twitter.js'></script>

Способы CSS для создания фиксированного соотношения сторон (CSS код)



@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300;700&display=swap');

.padding-hack {
  position: relative;
  width: 31vw;
  padding-top: 56.25%; 
/* calculating 16/9 ratio --- 9 / 16 * 100% = 56.25% */
}

.padding-hack iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.vw-solution{
  width: 31vw;
  height: 17.4375vw; 
  /* calculating 16/9 ratio ---- 31vw / 16 * 9 = 17.4375vw */
}

.aspect-ratio {
  width: 31vw;
  aspect-ratio: 16 / 9;
  /* aspect-ratio auto calculating 16/9 ratio */
}



html{font-family: 'Open Sans Condensed', sans-serif;}
body{
    margin:5vh 0;
    background-color: #333;
    color: #fff;
    background-image: repeating-linear-gradient( 45deg, #222, #333 2px, #222 4px);
}

h1{
  max-width:95vw; 
  margin:30px auto;
  font-size: clamp(1rem, 2vw, 2rem);
  font-weight: bold;
}
h1 span{font-weight:normal;}
h2{font-size:clamp(1rem, 1.5vw, 2rem); padding:1vw 0.8vw; background-color:#fff;}
ul{
  display:flex; 
  gap:1vw;
  max-width:95vw; 
  margin:0 auto;
  color:#333;
}
li{background-color:#dedede; border-radius:20px; overflow:hidden;}
iframe{display:block;}
code{
  display: block;
  padding: 20px;
  white-space: pre-wrap;  
  font-family:monospace, arial; 
  font-size: clamp(0.7rem, 1vw , 0.85rem);
  max-width: 31vw;
}

*{box-sizing:border-box;}


Способы CSS для создания фиксированного соотношения сторон (Результат кода)

153   0  
    Ничего не найдено.

Добавить ответ:
Отменить.