मूल आकार

निर्दिष्ट किए बिना div युक्त छवि में सीएसएस स्केल डाउन छवि, मैं एक वेबसाइट बनाना चाहता हूं जहां मैं एक jquery स्लाइडर में प्रदर्शित होने के लिए विभिन्न आकारों की छवियां अपलोड कर सकता हूं। मैं एक युक्त div में छवि फिट (स्केलिंग) लग रहा प्रतीत नहीं कर सकता। यहाँ कैसे मैं इसेमूल आकार

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<link rel="stylesheet" type="text/css" href="Imtest.css"/> 
</head> 

<body> 

<div id="wrapper"> 

<div id="im"><img src="Images/Scarpa2_1.jpg" /></div> 

</div> 
</body> 
</html>

करने के लिए इच्छुक हूँ और सीएसएस

#wrapper { 
    width: 400px; 
    height: 400px; 
    border: 2px black solid; 
    margin: auto; 
} 

#im { 
    max-width: 100%; 
}

मैं सीएसएस में 100% करने के लिए अपनी छवि के अधिकतम-चौड़ाई सेट करने के लिए कोशिश की है है। लेकिन यह काम नहीं करता है।

स्रोत

2013-09-04 Muteking

क्या आप कुछ नमूना छवियों के साथ jsfiddle में समस्या को पुन: उत्पन्न कर सकते हैं? –

#im img {display: block; ऊंचाई: 100%; चौड़ाई: 100%;} लेकिन छोटी छवियां खराब लग सकती हैं ..! –

आश्चर्यजनक रूप से आप कहते हैं कि छवि की अधिकतम 'चौड़ाई' सेटिंग 100% तक मदद नहीं करती है। [यह पूरी तरह से काम करता है] (http://jsfiddle.net/h6732/)। – user

आप इसे पूरा करने के लिए background image का उपयोग कर सकते हैं;

MDN से - Background Size: Contain:

यह कीवर्ड निर्दिष्ट करता है कि पृष्ठभूमि छवि सुनिश्चित करते हुए संभव के रूप में के रूप में बड़े होने के लिए बढ़ाया जाना चाहिए दोनों उसके आयाम हैं की तुलना में कम या पृष्ठभूमि स्थिति क्षेत्र की इसी आयाम के बराबर ।

Demo

सीएसएस:

#im { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-image: url("path/to/img"); 
    background-repeat: no-repeat; 
    background-size: contain; 
}

HTML:

<div id="wrapper"> 
    <div id="im"> 
    </div> 
</div>

स्रोत

2013-09-04 06:38:03 dc5

से बड़ा है समस्या: पृष्ठभूमि-छवि एसईओ अनुकूल नहीं होगी। – netalex

यह बहुत आसान है। बस img की चौड़ाई सेट करें 100%

स्रोत

2013-09-04 06:19:51

यह पहलू अनुपात वाली छवियों के लिए काम नहीं करेगा 1. – activatedgeek

से कम यह छवियों को भी स्केल करता है यदि div कंटेनर छवि –

अगर आप चौड़ाई और ऊंचाई दोनों चाहते हैं तुम कोशिश कर सकते

background-size: cover !important;

लेकिन यह छवि विकृत नहीं करेगा लेकिन div भरें।

स्रोत

2014-01-10 09:24:36 Chathuranga

-1

मैं उपयोग करता हूं:

ऑब्जेक्ट-फिट: कवर;
-o-object-fit: cover;

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

स्रोत

2015-05-12 07:52:33

यह क्यों मतदान किया जाता है? क्या यह टूट जाता है? –

कोई जानकारी नहीं है कि इसे क्यों वोट दिया गया था। यह विकल्प कभी भी है! –

एक वेबपृष्ठ में जहां मैं छवि आकार में ब्राउज़र आकार परिवर्तन के साथ स्केल करना चाहता था और शीर्ष पर रहता हूं, एक निश्चित div के बगल में, मुझे बस एक सीएसएस लाइन का उपयोग करना था: overflow:hidden; और यह चाल है। छवि पूरी तरह से तराजू।

विशेष रूप से अच्छा क्या है कि यह शुद्ध सीएसएस है और जावास्क्रिप्ट बंद होने पर भी काम करेगा।

सीएसएस:

#ImageContainerDiv { 
    overflow: hidden; 
}

HTML:

<div id="ImageContainerDiv"> 
    <a href="URL goes here" target="_blank"> 
    <img src="MapName.png" alt="Click to load map" /> 
    </a> 
</div>

स्रोत

2015-05-14 02:37:19

बड़ी छवियों के लिए, यह सिकुड़ने के बजाय अतिरिक्त कट/छुपाएगा। – MichaelZ

यह एक पुरानी सवाल मुझे पता है, लेकिन इस कई संबंधित Google खोजों के लिए शीर्ष पांच में है।

width:auto; 
height:auto; 
max-width:MaxSize; 
max-height:MaxSize;

ऑटो अंतरिक्ष आप MaxSize साथ निर्दिष्ट पर कब्जा करने में वृद्धि होगी (या कमी) चौड़ाई और ऊंचाई: यहाँ सीएसएस पृष्ठभूमि छवियों के लिए छवियों को बदले बिना ही एकमात्र समाधान है। यह छवियों के लिए आपके या दर्शक के ब्राउज़र के लिए छवियों के लिए किसी भी डिफ़ॉल्ट पर सवारी करेगा। मैंने पाया है कि एंड्रॉइड के फ़ायरफ़ॉक्स पर यह विशेष रूप से महत्वपूर्ण है। पिक्सल या प्रतिशत अधिकतम आकार के लिए काम करते हैं। मूल छवि के पहलू अनुपात को ऑटो करने के लिए ऊंचाई और चौड़ाई दोनों सेट के साथ बनाए रखा जाएगा।

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

स्रोत

2015-06-07 22:34:20

'अधिकतम आकार' के लिए समर्थन क्या है? – crmpicco

यह जो भी अधिकतम चौड़ाई और अधिकतम ऊंचाई का उपयोग करना चाहते हैं, पिक्सल या प्रतिशत में (चौड़ाई और ऊंचाई प्रदान करना माता-पिता पर सेट है।) –

जो काम नहीं करता – avalanche1

मुझे विश्वास है कि यह करने का यह सबसे अच्छा तरीका है, मैंने कोशिश की है और यह बहुत अच्छी तरह से काम करता है।

#img { 
    object-fit: cover; 
}

This is where I found it। सौभाग्य!

स्रोत

2016-11-21 20:38:23

वर्तमान में खराब ब्राउज़र समर्थन। अन्यथा यह सबसे अच्छा समाधान होगा। – CrazyTim

मैं इस का उपयोग कर रहा है, दोनों छोटे और बड़े चित्र:

.product p.image { 
text-align: center; 
width: 220px; 
height: 160px; 
overflow: hidden; 
} 
.product p.image img{ 
max-width: 100%; 
max-height: 100%; 
}

स्रोत

2017-09-03 13:55:34 Flavio

इन बातों के कई मेरे लिए काम नहीं किया ... फिर भी, ऐसा किया। भविष्य में किसी और की मदद कर सकते हैं। यहां सीएसएस है:

.img-area { 
    display: block; 
    padding: 0px 0 0 0px; 
    text-indent: 0; 
    width: 100%; 
    background-size: 100% 95%; 
    background-repeat: no-repeat; 
    background-image: url("https://yourimage.png"); 

    }

स्रोत

2017-10-27 18:37:48 Blake

मूल आकार

उत्तर

संबंधित मुद्दे