<img /> 가장 가까운 가로 세로 비율에 맞추기

로고 (왼쪽 상단 모서리에 있음)가 항상 가로 세로 비율을 유지하도록하고 싶습니다. 브라우저의 경우에도 올바른 위치에 머물러야합니다. 여기 내 코드는 다음과 같습니다<img /> 가장 가까운 가로 세로 비율에 맞추기

<body> 
<img src="/home/istom/Dropbox/bcs logo border.png" width="25%" height="25%" style="position:absolute;top:6%;left:9.7%;z-index:1" /> 
<div style="position:absolute;top:12.5%;left:12.5%;width:75%;height:75%;border-style:solid;border-color:#6699cc;border-width:3px;background-image:url('/home/istom/Downloads/BCHands.jpg');background-position:95% 50%;background-repeat:no-repeat;background-size:60% auto;"> 
    <div style="float:left;position:relative;top:25%;left:5%;">Hello</div> 
</div>

이 코드를 사용하여 창의 크기를 조절하면, 당신은 로고 모양에서 infuriatingly 한 뻗어 볼 수 있습니다. 종횡비가 유지되도록하려면 어떻게해야합니까?

추신 : 좋은 사람이 배경 이미지에 대해 동일한 작업을 수행하는 방법을 알려줄 수 있다면. 추신 : 최대한 작은 jQuery (여전히 jQuery가 유일한 방법 인 경우 ...)!

출처

2011-04-26 drnessie

이미지의 너비 만 지정하면 가로 세로 비율 (및 그 반대)을 유지하도록 높이가 자동으로 조정됩니다. 따라서 크기를 결정해야하는 것에 따라 CSS 높이 선언 또는 너비 선언을 제거하십시오.

사용자가 브라우저 화면 비율에 따라 결정 차원 인 차원 변경을 원한다면, 당신은 몇 가지 자바 스크립트/jQuery를 사용할 수 있습니다 확인합니다. 예를 들어 키가 큰 스키니 창은 결정 폭으로 너비가 있어야하며 폭이 짧은 짧은 창에는 높이를 사용해야합니다.

$(window).resize(function(){ 
    if ($(window).width()/$(window).height() < idealWidthHeightRatio) 
     $("#the_img").css({width: "auto", height: "25%"}) 
    else 
     $("#the_img").css({width: "25%", height: "auto"}) 

})

CSS 구문이 올바르다 고 생각합니다. 너비/높이는 CSS가 아닌 속성을 사용하여 정의해야합니다.

출처

2011-04-26 05:19:14 BudgieInWA

너비 만 또는 높이를 지정하면 가로 세로 비율이 유지됩니다.

출처

2011-04-26 05:19:21

<img /> 가장 가까운 가로 세로 비율에 맞추기

답변

관련 문제