집 > 기사 > 웹 프론트엔드 > JS에서 이미지 스트레칭 및 적응을 방지하는 방법

JS에서 이미지 스트레칭 및 적응을 방지하는 방법

php中世界最好的语言원래의: 2018-04-13 14:11:462196검색

이번에는 JS를 사용하여 이미지가 늘어나거나 늘어나는 것을 방지하는 방법과 JS가 이미지가 늘어나거나 늘어나는 것을 방지하는 주의사항에 대해 설명하겠습니다. 실제 사례를 살펴보겠습니다.

머리말

나는 일상적인 웹 개발에서 프런트 엔드로서 이미지 스트레칭 문제에 자주 직면한다고 믿습니다.

예를 들어 배너, 사진 및 텍스트 목록, 아바타 등은 모두 사용자 또는 고객이 사진을 독립적으로 조작하여 업로드할 수 있는 장소입니다. 사진 업로드, 사용자 또는 고객 고객은 사진의 효과적인 콘텐츠가 최적의 솔루션이라는 것을 분명히 인식합니다. 그러나 다양한 외부 요인으로 인해 잘림이 없는 경우 이를 충족하려면 프런트 엔드 디스플레이에서 처리해야 합니다. 모든 크기의 사진을 업로드하려면 최적의 디스플레이 효과가 필요합니다.

사진을 프레임에 넣으려면 몇 단계가 필요합니까? 세 단계... 시작해 보세요

1단계: 먼저 프레임을 그립니다(적응형 프레임 방법은 다음과 같습니다)

// 假定需要一个在750px屏幕下宽400px，高280px的盒子
// 宽度 = 400 / 750 = 0.5333
// 高度 = 280 / 400 * 0.5333 = 0.3733
<style>
 .img-box{
  position: relative;
  width: 53.33%;
  height: 0;
  padding-bottom: 37.33%;
  overflow: hidden;
  background-color: #eee;
 }
</style>
<body>
 <p id="list">
  <p class="img-box">
   <img src="..."/>
  </p>
 </p>
</body>

2단계: 이미지에 필요한 CSS 설정

<style>
 .width{
  position: absolute !important;
  width: 100% !important;
  min-height: 100% !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  -ms-transform: translateY(-50%) !important;
  -moz-transform: translateY(-50%) !important;
  -webkit-transform: translateY(-50%) !important;
  -o-transform: translateY(-50%) !important;
  display: block;
 }
 .height{
  position: absolute !important;
  height: 100% !important;
  min-width: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  -ms-transform: translateX(-50%) !important;
  -moz-transform: translateX(-50%) !important;
  -webkit-transform: translateX(-50%) !important;
  -o-transform: translateX(-50%) !important;
  display: block;
 }
</style>

3단계: js는 이미지 높이 비교를 가져오고 img

//需要注意的是，不能在css中直接给img设置宽度和高度
//否则在img.onload后获取的宽高是css设置的宽高
//同时建议使用dom对象来获取img标签
<script>
 var list = document.getElementById('list');
 getImgWH ( list );
 //执行宽高比对并设置img类名
 function getImgWH ( Obj ) {
  var img = Obj.getElementsByTagName('img');
  for( var i=0 ; i<img.length ; i++ ){
   img[i].onload = function(){
    var width = this.width;
    var height = this.height;
    if ( width > height ) {
     this.classList.add('height');
    } else if ( width < height ) {
     this.classList.add(&#39;width&#39;);
    } else {
     this.style.width = &#39;100%&#39;;
     this.style.height = &#39;100%&#39;;
    }
   }
  }
 }
</script>

에 클래스 이름을 추가합니다. 이미지가 늘어나는 것을 방지하는 것은 상대적으로 간단하지만, 실제 프로젝트에서는 웹 페이지가 그림이 되거나 그림이 되고, 늘어난 이미지는 디자이너가 걱정할 때까지 기다리기만 하면 되기 때문에 주의가 필요합니다. 하하하하...

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!