채택완료
span 안에 img 를 쓸때 img의 width 를 꽉 채우려면?
나른한 주말 저녁입니다.
css 질문 좀 드리려 합니다.
span의 width 가 300px이고 안에 img의 width가 200px 일때
여백 100px 이 남는데요. 이때 img의 width를 늘려 span 내에 꽉 차게 ㅎ면ㄴ
img의 크기가 span의 width에 맞게 늘려서 맞춰지게 하려면 어떻게 해야 할까요
<span style="width:100%;"><img src="abc.com/IMG.JPG" style="width:100%"></span>
|
답변 3개 / 댓글 2개
채택된 답변
+20 포인트
2024-03-24 (일) 19:31:25
span 은 인라인 태그로 width 값이 적용되지 않습니다.
<div style="display:inline-block;width:300px;">
<img src="이미지주소" style="width:100%;">
</div>
이렇게 하면 div 내부크기가 꽉 차게 img 가 나옵니다.
sinbihttps://codepen.io/sinbi/pen/abxWeJV
ps. 이미지를 span으로 묶는 건 비추천.
답변에 대한 댓글 2개
강력드라이브
2024-03-25 (월) 02:26:40
sinbi
2024-03-25 (월) 02:29:57
예. 그게 낫습니다.
다만, 꼭 필요한 게 아니면 그냥 이미지 자체만으로 해결될 듯 합니다.
다만, 꼭 필요한 게 아니면 그냥 이미지 자체만으로 해결될 듯 합니다.
2024-03-24 (일) 19:52:04
span 에 style 로 display:block 를 줘서 div 처럼 만들거나
애드프로님 답변처럼 span 대신 div 로 이미지를 감거나 해야 합니다.
답변을 작성하려면 로그인이 필요합니다.
span보다 div를 사용하는게 나을까요?