이미지 크기를 조정할 때 비율이 유지되지 않습니까?

웹 사이트에 이미지를 업로드하면 최대 100까지 크기가 조정됩니다. 유일한 문제는 그 비율을 유지하지 못하는 것입니다. 예 : 원본 이미지는 100x100 크기를 조정 한 후 200x400입니다. 비록 그것은 50으로해야한다 (100)이미지 크기를 조정할 때 비율이 유지되지 않습니까?

SCRIPT :

<script> 
    function readURL(input) { 
     if (input.files && input.files[0]) { 
      var reader = new FileReader(); 

      reader.onload = function (e) { 
       $('#imgprev') 
        .attr('src', e.target.result) 
        .width(100) 
        .height(100); 
      }; 

      reader.readAsDataURL(input.files[0]); 
     } 
    } 
</script>

CALL : 당신은 이미지 크기를 다시 할 때

  <div class="simplr-field "> 
       <label class="left" for="small_image"> 
        <strong>Huidige kleine afbeelding: </strong><br> (Hieronder vindt u de huidige kleine afbeelding.) 
        <br> 
        <img id="imgprev" src="<?=$post['small_image_url'];?>" alt="Afbeelding preview" style="width: 100px;"> 
      </div> 
       <div class="simplr-field "> 
        <label class="left" for="small_image"> 
         <strong>Wijzigen kleine afbeelding: </strong><br> (de gekozen afbeelding wordt automatisch geschaald naar een maximaal formaat van 100*100 pixels. 
         De bestaandsgrootte is 200kB maximaal. Alleen JPG, JPEG en PNG toegestaan.) 
        <br> 
         <input type="file" name="file" id="file" onchange="readURL(this)"> 
       </div>

출처

2015-01-13 Anona

그렇습니다. 귀하의 jQuey에 ** 너비 (100). 높이 (100) **가 있습니다. 그 중 하나 (너비 또는 높이)를 제거하면 CSS에 지정되어 있지 않으면 자동으로 만들어야합니다. – ggdx

함수를 호출하는 대신 timhumb을 사용하여 이미지의 크기를 조정하는 것이 어떻습니까? –

는 폭을 지정하고 자동으로 높이를 설정합니다. 가로 세로 비율이 유지됩니다.

reader.onload = function (e) { 
       $('#imgprev') 
        .attr('src', e.target.result) 
        .css({ 
         width: '100px', 
         height: 'auto' 
        }); 
      };

출처

2015-01-13 13:10:36

하지만 이미지가 200 x 400 대신 200 x 200이면 자동으로 이동해야합니다. 나는 매번 바뀌지 않을 것입니다 : p – Anona

이 대답은, 그리고 지금까지의 모든 대답은 종횡비를 보존 할 것입니다. 따라서 너비 또는 높이를 지정하면 다른 치수가 가로 세로 비율에 따라 계산됩니다. 종횡비를 변경해야하는 경우 명시 적으로 치수를 지정해야합니다 –

, 당신도하여 그것을 호흡 공간을 제공해야 그는 속성 값 그는 ight 또는 폭자동

HTML

<div id="image-container"> 
<!-- Image Goes here --> 
</div><!-- End Image Container -->

CSS

#image-container { 
    width: 100px; /* Adjust as needed */ 
    height: 100px; /* Adjust as needed */ 
    overflow: hidden; /* Cuts off whatever goes beyond the given dimension */ 
} 


#image-container img { 
     width: 100px; 
     height: auto; /* Gives the image the breathing space as it adjusts */ 
    }

출처

2015-01-13 13:09:40

이미지 크기를 조정할 때 비율이 유지되지 않습니까?

답변

관련 문제