రెస్పాన్సివ్ వెబ్ సైట్ డిజైన్ - ఇమేజ్

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" గా సెట్ చేస్తే, అంతర్భాగ చిత్రం స్కేలింగ్ అవుతుంది మరియు కంటెంట్ ఏరియాను సరిపోయేలా ప్రయత్నిస్తుంది. కానీ చిత్రం దాని అస్పాదం నిష్పత్తిని కాపాడుతుంది (చిత్రం వెడల్పు మరియు పొడవు మధ్య సామాన్యత సంబంధం):

ఇది CSS కోడ్ ఉంది:

实例

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%" ఆన్ని సెట్ చేసినప్పుడు, బ్యాక్గ్రౌండ్ చిత్రం పూర్తి కంటెంట్ రీజన్ను స్ట్రేచ్ చేసుకుంటుంది:

ఇది CSS కోడ్ ఉంది:

实例

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

亲自试一试

3. ఉన్నప్పుడు background-size అంశం "cover" ఆన్ని సెట్ చేసినప్పుడు, బ్యాక్గ్రౌండ్ చిత్రం పూర్తి కంటెంట్ రీజన్ను కవర్ చేసుకుంటుంది. గమనించండి, "cover" విలువ కాల్పనిక అస్థిరతను పరిరక్షిస్తుంది మరియు బ్యాక్గ్రౌండ్ చిత్రం యొక్క కొంత భాగాన్ని కటించవచ్చు:

ఇది CSS కోడ్ ఉంది:

实例

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 లో ప్రవేశపెట్టింది <picture> అంశం, దీని ద్వారా మీరు అనేక చిత్రాలను నిర్వచించవచ్చు.

బ్రౌజర్ మద్దతు

38.0 13 38.0 9.1 25.0

<picture> అంశం యొక్క పనితీరు వంటిది <video> మరియు <audio> అంశం. మేము వివిధ మూలాలను అమర్చాము, మరియు ప్రాధాన్యతని పొందిన మూలం వర్తించే మూలం:

实例

<picture>
  
  
  Flowers

亲自试一试

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

media 属性是可选的，它接受可在 CSS @media రుల్స్ లో మద్దతు లేని మీడియా క్వరీ కనుగొనండి.

సూచన:మీరు కూడా మద్దతు లేని ఉండవచ్చు <picture> ఏలంట్ బ్రౌజర్ డిఫినీషన్ <img> ఏలంట్