क्या छवि को अनुपात में रहने का कोई तरीका है? - एचटीएमएल, सीएसएस, छवि

नमस्ते मैं html और सीएसएस के साथ कुछ सामान बाहर की कोशिश कर रहा हूँयह देखने के लिए कि क्या काम करता है और क्या नहीं करता है, और मैं सोच रहा था कि क्या यह संभव है कि आपकी स्क्रीन के केंद्र में एक छवि बनी रहे और हमेशा स्क्रीन के आकार के अनुकूल हो। उदाहरण के लिए एक छवि है कि जब मैं इसे देखता हूं। एक स्क्रीन जो 1920 * 1080 192 * 108 बड़ी है और जब मैं इसे 1600 * 900 स्क्रीन पर देखता हूं तो यह 160 * 90 हो जाती है, जबकि छवि का केंद्र बीच में रहता है।

पुनश्च: यह कोई फर्क नहीं पड़ता कि छवि का रिज़ॉल्यूशन बदल जाता है, भले ही यह छवि कभी-कभी भयानक दिखती है।

उत्तर:

आप इसे "केवल एक छवि टैग के साथ कर सकते हैं। आप छवि को डाल सकते हैं" जो कि पृष्ठभूमि-छवि के रूप में उपयोग कर रहे हैं और फिर आकार को कवर करने के लिए सेट करें। मूल रूप से यह:

body {
background-image: url("url/to/your/image.jpeg");
background-size: cover;
background-position: center center;
}

स्क्रीन के आकार के अनुकूल होने के लिए, छवि को कंटेनर में रखें और फिर करें:

   img{
width:100%;
height:auto; /*maintains aspect ratio */
}

अब छवि में कंटेनर का आयाम होगा !!

अपनी div के केंद्र में छवि संरेखित करने के लिए ... do:

div{
width:80%;
margin:0 auto; /*align div in center first*/
text-align:center /*center content*/
}

से लिया गया

छवि स्केल को ऊपर और नीचे करने के लिए CSS का उपयोग करें

img {
width:100%;
}

हालाँकि, यह आसानी से छवि को कुल बकवास जैसा बना सकता है। एक सुरक्षित तरीका हो सकता है:

img {
max-width:100%;
}

किसी भी तरह से ब्राउज़र आकार बदलने के साथ छवि बदलते आकार मिलेंगे। हालांकि, दूसरा जीता "छवि को उसके प्राकृतिक आकार से पीछे खींचता है, इसलिए यह विकृत नहीं दिखता है।"