ریسپانسیو ویب پیج ڈیزائن - عکس

width ਪ੍ਰਤੀਯੋਗੀ ਦੀ ਵਰਤੋਂ

ਜੇਕਰ width ਪ੍ਰਤੀਯੋਗੀ ਨੂੰ ਪ੍ਰਤੀਸ਼ਤ ਵਿੱਚ ਸੈਟ ਕਰੋ ਅਤੇ ਉਚਾਈ ਨੂੰ "auto" ਸੈਟ ਕਰੋ, ਤਾਂ ਚਿੱਤਰ ਜਾਂਚੇਗਾ ਅਤੇ ਵਧਾਉਣ ਜਾਂ ਛੋਟਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੇਗਾ:

实例

img {
  width: 100%;
  height: auto;
}

亲自试一试

ਧਿਆਨ ਦੇਵੋ ਕਿ ਉੱਪਰੋਕਤ ਉਦਾਹਰਣ ਵਿੱਚ, ਚਿੱਤਰ ਆਪਣੇ ਮੂਲ ਆਕਾਰ ਤੋਂ ਵੱਧ ਹੋ ਸਕਦਾ ਹੈ। ਬਹੁਤ ਸਾਰੇ ਮਾਮਲਿਆਂ ਵਿੱਚ ਬਿਹਤਰ ਸਲਾਹ ਇਹ ਹੈ ਕਿ max-width ਪ੍ਰਤੀਯੋਗੀ

max-width ਪ੍ਰਤੀਯੋਗੀ ਦੀ ਵਰਤੋਂ

ਜੇਕਰ ਤੁਸੀਂ max-width ਪ੍ਰਤੀਯੋਗੀ ਨੂੰ 100% ਸੈਟ ਕੀਤਾ, ਤਾਂ ਚਿੱਤਰ ਮੰਗ ਅਨੁਸਾਰ ਛੋਟਾ ਹੋਵੇਗਾ, ਪਰ ਕਦੇ ਵੀ ਆਪਣੇ ਮੂਲ ਆਕਾਰ ਤੋਂ ਵੱਧ ਨਹੀਂ ਵਧੇਗਾ:

实例

img {
  max-width: 100%;
  height: auto;
}

亲自试一试

ਪ੍ਰਤੀਯੋਗੀ ਵੈੱਬਸਾਈਟ ਵਿੱਚ ਚਿੱਤਰ ਜੋੜੋ

实例

img {
  width: 100%;
  height: auto;
}

亲自试一试

ਪਿੱਛੋਕੜੀ ਚਿੱਤਰ

ਪਿੱਛੋਕੜੀ ਚਿੱਤਰ ਵੀ ਸਜਾਵਟ ਅਤੇ ਸਕੇਲਿੰਗ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰ ਸਕਦਾ ਹੈ:

ਇਹ ਸਾਡੇ ਪ੍ਰਦਰਸ਼ਿਤ ਕੀਤੇ ਗਏ ਤਿੰਨ ਵੱਖ-ਵੱਖ ਤਰੀਕੇ ਹਨ:

1. ਜੇਕਰ ਤੁਸੀਂ background-size 属性设置为 "contain"،ਤਾਂ ਪਿੱਛੋਕੜੀ ਚਿੱਤਰ ਜਾਂਚੇਗਾ, ਅਤੇ ਕੰਟੈਂਟ ਖੇਤਰ ਨਾਲ ਮੇਲ ਖਾਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੇਗਾ। ਪਰ ਚਿੱਤਰ ਆਪਣੇ ਅਕਾਰ ਨੂੰ ਰੱਖੇਗਾ (ਚਿੱਤਰ ਚੌਡਾਈ ਅਤੇ ਉਚਾਈ ਦਰਮਿਆਨ ਦਾ ਪ੍ਰਪੋਰਸ਼ਨ):

یہ سی ایس ایس کوئر کا کد ہے:

实例

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid red;
}

亲自试一试

2. اگر background-size اگر پس منظر تصویر کا مقصد '100% 100%' رکھا گیا تو پس منظر تصویر کو پورے مطلب کو پوشایا جائے گا:

یہ سی ایس ایس کوئر کا کد ہے:

实例

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: 100% 100%;
  border: 1px solid red;
}

亲自试一试

3. اگر background-size اگر 'cover' کا مقصد 'cover' رکھا گیا تو پس منظر تصویر کو پورے مطلب کو پوشایا جائے گا. لطفاً یقین رکھیئے کہ 'cover' کا مقصد کا مقصد طوالت اور عرض کا تناسب رکھتا ہے اور پس منظر تصویر کا کسی حصے کو کاٹ سکتا ہے:

یہ سی ایس ایس کوئر کا کد ہے:

实例

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: cover;
  border: 1px solid red;
}

亲自试一试

مختلف آلے کیلئے مختلف تصاویر تیار کریں

بڑا تصویر بڑی کمپیوٹر اسکرین پر کمال سے دکھائیں گا، لیکن چھوٹی آلے پر استعمال نہیں کیا جاسکتا۔چرا بڑا تصویر لوڈ کرنا چاہئے جب آپ کو تصویر کو چھوٹا کرنا پڑتا ہے؟ تاکہ لوڈنگ کو کم کرنا یا کسی دیگر وجہ کیلئے، آپ میں میڈیا کوئری کا استعمال کرسکتا ہیں تاکہ مختلف آلے پر مختلف تصاویر دکھائیں جاسکیں.

یہ ایک بڑا تصویر اور ایک چھوٹا تصویر ہے، جو مختلف آلے پر دکھائیں گا:

实例

/* 400 پیکسل سے کم کی بڑائی کیلئے: */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* 400 پیکسل یا بڑتر کی بڑائی کیلئے: */
@media only screen and (min-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

亲自试一试

آپ میں میڈیا کوئری کا استعمال کرسکتا ہیں min-device-width بجائے min-width آپ اپنے براؤزر کی ونڈو کی بڑائی کو تیار کیا، تو تصاویر بدل نہیں پائیں گے:

实例

/* 400 پیکسل سے کم کی اہلیت والے آلات کیلئے: */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* 400 پیکسل اور بڑتر کی اہلیت والے آلات کیلئے: */
@media only screen and (min-device-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

亲自试一试

HTML5 <picture> عنصر

HTML5 میں عنصر، جو آپ کو متعدد تصاویر کا تعریف کرنا دے سکتا ہے.

براؤزر سپورٹ

38.0 13 38.0 9.1 25.0

عنصر کا کردار <video> اور <audio> 元素।हम نے مختلف منابع کو قائم کیا ہے، اور ترجیحی منبع کی پہلی منبع جو استعمال میں ہے:

实例


  
  
  Flowers

亲自试一试

srcset 属性是必需的，它定义图像的来源。

media 属性是可选的，它接受可在 CSS @media 规则 中找到的媒体查询。

提示：您还应该为不支持 元素的浏览器定义 元素。