HTML : 고정 크기의 이미지 중심 지정

간단한 HTML을 만들고 싶지만 해결책을 찾지 못합니다. 어쩌면 당신이 나를 도울 수 있습니다.HTML : 고정 크기의 이미지 중심 지정

나는 빈 웹 사이트()가 있고 이미지를 페이지 중앙 (수직 및 수평)에 넣고 싶습니다. 그곳에는 이미지의 크기로 위치를 계산하는 많은 솔루션이 있습니다. 문제는 로컬 화면 해상도에 따라 이미지의 크기를 지정하려고한다는 것입니다.

이미지는 화면 너비의 70 %를 항상 채워야하며 높이는 비례하지 않아야합니다. 사용자가 브라우저 창 크기를 조정하더라도.

최상은 divs와 CSS가있는 솔루션이지만, 필요한 경우 테이블과 HTML 형식화도 좋습니다.

출처

2013-07-26 user2623615

이미지 위치를 절대적으로 지정할 수 있습니까? 동적 이미지 크기이기 때문에 jquery가 도움이 될 것입니다. 이미지가 제대로 조정 : jQuery로

img { 
    display: block; 
    height: auto; 
    margin: 0 auto; 
    width: 70%; 
}

: http://jsfiddle.net/b4ttq/

출처

2013-07-26 17:14:26 jerrylow

-1

은 70 % 폭의 사업부를 타고, 여백에서 왼쪽으로 15 % : 여기

$(document).ready(function() { 
    img_adjust($('img')); 

    $(window).resize(function() { 
     img_adjust($('img')); 
    }); 
}); 

function img_adjust(image_obj) { 
    var window_height = $(window).height(); 
    var image_height = image_obj.outerHeight(); 
    var margin_top = (window_height - image_height)/2; 

    image_obj.css('margin-top', margin_top + 'px'); 
}

행동의 예입니다 ! 그게 당신의 컨테이너 센터. 그에 따라 높이를 동일하게하십시오! 당신은 캔트, 당신은 당신이 수직으로 이미지의 중심을 할 수 없습니다 전혀 자바 스크립트없이 그 일을하는 경우 이미지 크기는 CSS를해야 img {max-width:100%; height:auto;} ..

출처

2013-07-26 17:14:40 Arni

줄 적응. 이것은 내가 올 수있는 최고의 순수한 HTML - CSS 솔루션입니다. 다음 코드는 이미지를 너비와 높이의 70 %로 비례 적으로 크기를 조정하고 이미지를 위쪽에서 30 %로 설정합니다.
HTML :

<div id='block'>&nbsp;</div> 
<div id='pic'> 
    <img id='img' src='https://www.google.com/images/srpr/logo4w.png' /> 
</div>

CSS :

#block{ 
     height:30%; 
     display: block; 
    } 
    #pic{ 
     display: block; 
     width: 70%; 
     margin-left: auto; 
     margin-top: auto; 
    } 
    #img{ 
     width: 70%; 
    }

출처

2013-07-26 19:34:56 Optox

HTML : 고정 크기의 이미지 중심 지정

답변

관련 문제