반응형 테마에서 본문작성시 이미지 선택 출력
본문
반응형테마를 적용중이고요.
본문 작성시 통이미지로 작업할 내용이 있는데요.
가로폭에 따라서 이미지를 여러개 작성하고요.
브라우저의 가로폭에 따라 다른 이미지를 보여주도록 하고 싶습니다.
스타일이 아닌 본문에서 직접 적용하는 방법이 있을까요?
작성하고자 하는 코드내용은
가로폭이 1000px 이상일때는 "width_large.jpg" 를 보여주고,
가로폭이 400px이상 1000px 미만일때는 "width_medium.jpg" 를 보여주고,
가로폭이 400px미만 일때는 "width_small.jpg 를 보여주게 하고 싶습니다.
본문에서 직접 태그로 작성해서 위와 같이 적용이 가능 할까요?
답변 4
PHP 또는 Javascript로도 가능할 수 있지만,
코드가 예쁘지 않을 겁니다. 이미지가 많기라고 한다면...
CSS의 Media쿼리를 무조건 추천합니다.
네~ 역시 미디어쿼리를 써야 겠네요. 말려 주셔서 감사합니다.^^
미디어쿼리로 작성하시면 됩니다.
본문에 에디터를 쓰느냐 안쓰느냐에 따라 다르겠지만
에디터를 사용하지 않는다면,
파일별로 크기를 구분하는 세개의 파일을 올리고
view.skin.php에서 파일을 출력하는 부분에서 각 파일마다 클래스나 아이디를 따로 주시고
css에서 미디어쿼리로 보이게 안보이게 조정하시면 될것 같습니다
그래도 해야 한다면...
<img src="" data-img_name="img001" class='all_image' />
<img src="" data-img_name="img002" class='all_image' />
<img src="" data-img_name="img003" class='all_image' />
$(document).ready(function(){
if ( window.innerWidth > 1000 ) {
$(".all_image").each(function (index){
$(this).attr("src", $(this).attr("data-img_name") +"_large.jpg");
});
} else if ( window.innerWidth < 400 ) {
$(".all_image").each(function (index){
$(this).attr("src", $(this).attr("data-img_name") +"_small.jpg");
});
} else {
$(".all_image").each(function (index){
$(this).attr("src", $(this).attr("data-img_name") +"_medium.jpg");
});
}
)};
bootstarp을 쓰신다면 col-lg,col-md,col-sm,col-xs 로 나눌수도 있어요!
답변을 작성하시기 전에 로그인 해주세요.
