क्या सीएसएस में एक आईएमजी तत्व की छवि को युक्त बटन तत्व से मिलान करने का कोई तरीका है?
इस उदाहरण में, मैं चाहता हूं कि छवि बटन पर केंद्रित हो और बटन के आकार के लिए उपयुक्त रूप से स्केल की गई हो। वास्तव में उन्हें न तो उपयुक्त रूप से बढ़ाया गया है और न ही संरेखित किया गया है।
<html>
<head>
<title>Button img element scaling</title>
<style type="text/css">
div.container {
display: flex;
justify-content: center;
}
button {
min-width: 20px;
max-width: 20px;
flex-basis: 20px;
height: 20px;
}
</style>
</head>
<body>
<div class="container">
<button>
<img src="https://fonts.gstatic.com/s/i/materialicons/clear/v6/24px.svg" />
</button>
<button>
<img src="https://fonts.gstatic.com/s/i/materialicons/clear/v6/24px.svg" />
</button>
</div>
</body>
</html>
मेरा मानना है कि बटन तत्वों के बजाय divs का उपयोग करना संभव है, लेकिन मैं बटन तत्वों के बारे में पूछ रहा हूं (क्योंकि बटन को एक बटन होना अच्छा है, और क्योंकि मेरे पास पहले से ही बटन हैं)।
मैं यह भी मानता हूं कि पृष्ठभूमि छवियों का उपयोग करके इस तक पहुंचने के वैकल्पिक तरीके हैं, लेकिन चूंकि यहां छवि केवल सजावट नहीं है बल्कि अर्थपूर्ण अर्थ है, मैं एक आईएमजी का उपयोग करना चाहता हूं (और बाद में एक alt विशेषता जोड़ें)।
उदाहरण फ्लेक्स का उपयोग करता है, लेकिन समस्या उसके लिए विशिष्ट प्रतीत नहीं होती है।
2 जवाब
बटन पर डिस्प्ले फ्लेक्स ही ट्रिक करने लगता है
<html>
<head>
<title>Button img element scaling</title>
<style type="text/css">
div.container {
display: flex;
justify-content: center;
}
button {
min-width: 20px;
max-width: 20px;
flex-basis: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="container">
<button>
<img src="https://fonts.gstatic.com/s/i/materialicons/clear/v6/24px.svg" />
</button>
<button>
<img src="https://fonts.gstatic.com/s/i/materialicons/clear/v6/24px.svg" />
</button>
</div>
</body>
</html>संपादित करें
अगर इसे बटन के आकार तक बढ़ने की जरूरत है, तो आप इसे स्केल करने के लिए छवि पर width="100%" height="100%" जोड़ सकते हैं।
यह इस तरह दिखेगा:
<img src="https://fonts.gstatic.com/s/i/materialicons/clear/v6/24px.svg" width="100%" height="100%" />
मुझे लगता है कि आप अपने सीएसएस में ऑब्जेक्ट-फिट का उपयोग कर सकते हैं -> https://www.w3schools .com/css/css3_object-fit.asp