모든 이미지를 CSS로 만들고 싶습니다 (배경 이미지로 넣는 방법을 아는 유일한 방법).
그러나이 솔루션의 문제는 div가 이미지의 크기를 차지하도록 할 수 없다는 것입니다.
그래서 내 질문은 : <div><img src="..." /></div>
CSS 에서에 상응하는 가장 좋은 방법은 무엇
입니까?
답변
Jaap의 답변 :
<div class="image"></div>
그리고 CSS에서 :
div.image {
content:url(http://placehold.it/350x150);
}
이 링크에서 시도해 볼 수 있습니다 :
http://jsfiddle.net/XAh2d/
이것은 CSS 콘텐츠에 대한 링크입니다
http://css-tricks.com/css-content/
이것은 Chrome, firefox 및 Safari에서 테스트되었습니다. (저는 Mac을 사용하고 있으므로 누군가 IE에 결과가 있으면 추가하라고 알려주세요)
답변
다음과 같이 할 수 있습니다.
<div class="picture1"> </div>
이것을 CSS 파일에 넣으십시오.
div.picture1 {
width:100px; /*width of your image*/
height:100px; /*height of your image*/
background-image:url('yourimage.file');
margin:0; /* If you want no margin */
padding:0; /*if your want to padding */
}
그렇지 않으면 그냥 평범하게 사용하십시오.
답변
이것을 샘플 코드로 사용하십시오. 이미지 높이와 이미지 너비를 이미지 크기로 바꿉니다.
<div style="background:yourimage.jpg no-repeat;height:imageheight px;width:imagewidth px">
</div>
답변
Javascript / Jquery 사용 :
- 숨겨진 이미지로드
img
- 이미지가로드되면 너비와 높이를 가져옵니다.
div
너비, 높이 및 배경을 동적으로 만들고 설정-
원본 제거
img
$(document).ready(function() { var image = $("<img>"); var div = $("<div>") image.load(function() { div.css({ "width": this.width, "height": this.height, "background-image": "url(" + this.src + ")" }); $("#container").append(div); }); image.attr("src", "test0.png"); });