यह बहुत आसान होना चाहिए, लेकिन मुझे अपनी साइट के लिए @2x छवियां (रेटिना के आकार का दोगुना) मिल रही हैं और मुझे साइट के लिए उन्हें 50% तक बढ़ाने की आवश्यकता है। मैंने मूल रूप से कोशिश की

height:50%;
width:auto;

लेकिन इसने इसे कंटेनर के आधे आकार तक छोटा कर दिया। फिर मैंने कोशिश की

transform: scale(0.5)

जो काम करता है लेकिन छवि के ऊपर और नीचे एक बड़ा अंतर (छवि के मूल आकार में अंतर) छोड़ देता है।

दृश्य समस्या पैदा किए बिना छवि को आधे आकार में दिखाने का सबसे अच्छा तरीका क्या है।

css
0
Wally Kolcz 10 अप्रैल 2020, 18:19

1 उत्तर

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

आप ट्रांसलेशन एक्स और ट्रांसलेट वाई का इस्तेमाल रिमूव गप transform: scale(0.5) translateX(-50%) translateY(-50%) के लिए कर सकते हैं

उदाहरण देखें: https://jsfiddle.net/denisstukalov/bpwuhtfc/

1
Denis Stukalov 10 अप्रैल 2020, 17:08