अगर मैं सीएसएस (चौड़ाई: 100%; ऊंचाई: 100%) का उपयोग करके चौड़ाई और ऊंचाई निर्धारित करता हूं, तो छवि को बढ़ाया जाएगा, और यह बदसूरत लग रहा है। बिना स्ट्रेच किए इमेज कैसे भरें? क्या अधिक है, ऊर्ध्वाधर और क्षैतिज केंद्र कैसे बनाएं?

-1
zhenan.dev 11 नवम्बर 2020, 16:35

3 जवाब

सबसे बढ़िया उत्तर

केवल HTML और CSS का उपयोग करना:

एचटीएमएल

<div class="fill"></div>

सीएसएस

.fill {
    overflow: hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-size: cover;
    background-position: center;
    background-image: url('path/to/image.jpg');
}
2
zhenan.dev 11 नवम्बर 2020, 17:46

उपयोग

छवि के स्वामी को श्रेय छवि स्रोत: https://imgur.com/gallery/ow0qD

* {
  margin: 0;
}

.bg {
  width: 100%;
  height: 100vh;
}

.bg img {
  object-fit: cover;
  width: 100%;
  height: 100vh;
}
<body>
  <div class="bg"><img src="https://i.imgur.com/PLZJasi.jpg"></div>
1
Twak 11 नवम्बर 2020, 16:42

हम दोनों का उपयोग नहीं करते हैं, केवल चौड़ाई 100% निर्धारित करते हैं। फिर स्थिति सापेक्ष, पृष्ठभूमि-आकार को कवर करने के लिए सेट करें, और अतिप्रवाह छुपाएं।

0
Hamed-iam 11 नवम्बर 2020, 16:43