मैं बिना छवि के एक छवि का आकार कैसे बदल सकता हूं?

Question

मुझे <img> चाहिए जिसका चौड़ाई पृष्ठ का 40% है, और यह फैला हुआ है।

मैं बिना खींच किए इसे कैसे आकार दे सकता हूं?

____8888________ 
____8888________ 
____8888________ 

जैसे ही मैंने बनाने:

उदाहरण के लिए, अगर मैं एक छवि है जिसका फ़ाइल मूल रूप से इस तरह दिखता है:

____8888________ 
____8888________ 
____8888________ 

मेरे वेबपेज में, कैसा लग रहा है सामान्य रूप से, यह होना चाहिए ब्राउज़र थोड़ा और संकीर्ण, max-width (मान लें कि इस उदाहरण में 10 वर्ण) प्रभावी होंगे।
जब ऐसा होता है, मैं चाहते हैं यह हो:

____8888__ 
____8888__ 
____8888__ 

(। यह दाईं ओर से कटे होने की तरह बेशक दोनों पक्षों से बेहतर कर रहे हैं),
बजाय:

__888_____ 
__888_____ 
__888_____ 

• कोई भी चाल (इसे <div> की पृष्ठभूमि में डालकर) ठीक है।
• चौड़ाई और ऊंचाई अज्ञात हैं।
• आपके पिछले उत्तरों के लिए धन्यवाद, लेकिन, क्षमा करें, मुझे लगता है कि मैंने पर के बाद पृष्ठ की 40% तक सीमित करने के बाद पर्याप्त जोर नहीं दिया है, जिसका मतलब है कि चौड़ाई से सीमित होने से पहले इसे सामान्य दिखना चाहिए ।

Answer 1

चाल को छवि को एक ब्लॉक ब्लॉक तत्व, उदाहरण के लिए एक DIV में रखना है। एक बार छवि की चौड़ाई 100% तक सेट करने के बाद, यह ब्राउज़र को डीवीवी के बाएं और दाएं किनारों के साथ छवि चौड़ाई फ्लश करने के लिए निर्देश देगा।

फिर आप सीआईवी के माध्यम से डीआईवी की चौड़ाई को नियंत्रित करते हैं, मुझे लगता है कि छवि को ब्लॉक तत्व में रखते हुए तरल लेआउट बनाते समय हेरफेर को अधिक आसान बनाता है।

उदाहरण:

img.stretchy { 
 
width: 100%; /*Tells image to fit to width of parent container*/ 
 
} 
 
.container { 
 
width: 33%; /*Use this to control width of the parent container, hence the image*/ 
 
}

<div class="container"> 
 
    <img src="http://i.stack.imgur.com/fv6Ib.jpg" alt="Beach Scene" class="stretchy" /> 
 
</div>

आप छवि वान तो काटा जा करने के लिए/किसी भी तरह से काटा, सेट यह बड़ा की तुलना में यह माता पिता है, और छिपा करने के लिए माता पिता के अतिप्रवाह सीएसएस स्थापित करने के लिए ।

उदाहरण:

img.clipped { 
 
    width: 150%; /*Scales image to 150% width of parent container*/ 
 
    float: left; /*Floats image to left of container - clipping right hand side*/ 
 
    float: right; /*Floats image to right of container - clipping left hand side*/ 
 
} 
 
.container { 
 
    width: 33%; /*Use this to control width of the parent container, hence the image*/ 
 
    overflow: hidden; 
 
}

<div class="container"> 
 
    <img src="http://i.stack.imgur.com/fv6Ib.jpg" alt="Beach Scene" class="clipped" /> 
 
</div>

आशा इस मदद करता है ...

Answer 2

क्या आपका मतलब छवि को फसल करना है? यदि ऐसा है तो सीएसएस ओवरफ्लो संपत्ति में देखें। इसके अलावा आप इसे पृष्ठभूमि में डाल सकते हैं और इसे div

Answer 3

यहां कुछ विकल्प है।(यहां इन सभी विकल्पों का डेमो देखें: http://jsfiddle.net/Squeegy/Gcrdu/)

अज्ञात आकार की एक सादा छवि के रूप में पहला। यह किसी भी आकार पर प्रदर्शित होता है जो ऐसा होता है।

<img src="http://www.google.com/logos/classicplus.png"> 

लेकिन के रूप में यह पता चला है, तो आप एक छवि का पक्ष अनुपात रक्षा कर सकते हैं अगर आप केवल चौड़ाई, या केवल ऊंचाई निर्धारित किया है। अन्य आयाम चीजों को खींचने से बचाने के लिए खुद को समायोजित करेगा।

// HTML 
<img src="http://www.google.co.jp/logos/classicplus.png" class="aspectshrink"> 

// CSS 
img.aspectshrink { 
    width: 100px; 
} 

लेकिन जब आप सीएसएस पृष्ठभूमि छवियों का उपयोग आप जहां लंगर पृष्ठभूमि के आधार पर कुछ रचनात्मक फसल कर सकते हैं।

यह कहते हैं, "गो"

// HTML 
<div class="cropped-right"></div> 

// CSS 
.cropped-right { 
    width: 100px; 
    height: 100px; 
    background: url(http://www.google.com/logos/classicplus.png); 
    background-position: left center; 
    background-repeat: no-repeat; 
    border: 1px solid red; 
} 

और यह कहते हैं, "gle": ImageResizer उपयोग करने के लिए

// HTML 
<div class="cropped-left"></div> 

// CSS 
.cropped-left { 
    width: 100px; 
    height: 100px; 
    background: url(http://www.google.com/logos/classicplus.png); 
    background-position: right center; 
    background-repeat: no-repeat; 
    border: 1px solid red; 
}; 

Answer 4

प्रयास करें। http://imageresizing.net/

Answer 5

IMG HTML टैग करने के लिए इस वर्ग के रूप में यह है जोड़ें, यह छवि रखेंगे, लेकिन छवि

.img{ 
    width:40%; 
    height:40%; //change to whatever your choice 

/*Scale down will take the necessary specified space that is 40% x 40% without stretching the image*/ 
    object-fit:scale-down; 
} 

अधिक समय दिए बिना आवश्यक निर्दिष्ट अंतरिक्ष ie.40% x 40% ले जाएगा: यहाँ लिंक है