ਕਿਵੇਂ ਬਣਾਓ: ਰੈਸਪੋਨਸਿਵ ਇਫਰੇਮ

CSS ਦੀ ਮਦਦ ਨਾਲ ਰੈਸਪੋਨਸਿਵ ਇਫਰੇਮ ਕਿਵੇਂ ਬਣਾਓ ਸਿੱਖੋ。

How To - ਰੈਸਪੋਨਸਿਵ ਇਫਰੇਮ

ਪਹਿਲਾ ਪੜਾਅ - ਐਲਾਨਿਕੀ ਜੋੜੋ:

ਕੰਟੇਨਰ ਇਲੈਕਟ੍ਰੌਨ ਜਿਵੇਂ <div> ਦਾ ਉਪਯੋਗ ਕਰੋ ਅਤੇ ਉਸ ਵਿੱਚ ਇਫਰੇਮ ਜੋੜੋ:

<div class="container">
  <iframe class="responsive-iframe" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>

ਦੂਜਾ ਪੜਾਅ - ਸਕਸ਼ਨ ਜੋੜੋ:

ਲਈ padding-top ਪ੍ਰਤੀਸ਼ਤ ਮੁੱਲ ਜੋੜ ਕੇ ਕੰਟੇਨਰ DIV ਦੇ ਅਸਪਾਟੇ ਨੂੰ ਬਣਾਓ। ਹੇਠ ਦਾ ਉਦਾਹਰਣ 16:9 ਦਾ ਅਸਪਾਟਾ ਵਾਲਾ ਕੰਟੇਨਰ ਬਣਾਉਂਦਾ ਹੈ ਜੋ YouTube ਵੀਡੀਓ ਦੇ ਡਿਫਾਲਟ ਅਸਪਾਟਾ ਹੈ。

ਮਾਡੂਲ - 16:9 ਅਸਪਾਟਾ

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 ਅਸਪਾਟਾ (9 ਵੰਡੇ 16 ਵਿੱਚ 0.5625 ਹੁੰਦਾ ਹੈ) */
}
/* ਫਿਰ ਇਫਰੇਮ ਦੇ ਸਟਾਈਲ ਨੂੰ ਸੈਟ ਕਰੋ ਤਾਕਿ ਇਹ ਪੂਰੀ ਉਚਾਈ ਅਤੇ ਵਿਆਪਕਤਾ ਨਾਲ ਕੰਟੇਨਰ div ਨੂੰ ਅਨੁਕੂਲ ਹੋਵੇ */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

亲自试一试

ਹੋਰ ਅਸਪਾਟਾ

ਮਾਡੂਲ - 4:3 ਅਸਪਾਟਾ

.container {
  padding-top: 75%; /* 4:3 ਅਸਪਾਟਾ */
}

亲自试一试

ਮਾਡੂਲ - 3:2 ਅਸਪਾਟਾ

.container {
  padding-top: 66.66%; /* 3:2 ਅਸਪਾਟਾ */
}

亲自试一试

ਮਾਡੂਲ - 8:5 ਅਸਪਾਟਾ

.container {
  padding-top: 62.5%; /* 8:5 ਅਸਪਾਟਾ */
}

亲自试一试

ਮਾਡੂਲ - 1:1 ਅਸਪਾਟਾ (ਹਾਈਟ ਅਤੇ ਵਿਆਪਕਤਾ ਹਮੇਸ਼ਾ ਬਰਾਬਰ ਹੁੰਦੇ ਹਨ)

.container {
  padding-top: 100%; /* 1:1 宽高比 */
}

亲自试一试