amp-img 태그에서 원본 이미지의 종횡비를 유지할 수있는 방법이 있습니까?

Question

AMP에서 HTML 레이아웃 = 반응 형은 width 및 height 속성을 사용하여 이미지에 부여하는 종횡비 만 유지합니다. 이미지 자체의 종횡비를 유지할 수있는 방법이 있습니까?

Answer 1

아니요. 사용중인 백엔드 또는 이미지 API에서 종횡비 정보를 가져 와서 높이 및 너비 속성에 변수로 넣을 수 있습니다.

GitHub의에서 문제를 다음을 참조하십시오 당신이 A-IMG 컨테이너 사업부를 주면 가리키고 작품은, 주위가 https://github.com/ampproject/amphtml/issues/2039 https://github.com/ampproject/amphtml/issues/2939

Answer 2

(개인적으로 내가 백엔드에서 동적으로이 작업을 수행)

다음 적용 콘테이너에 높이, 그 후에 당신은 css를 이용할 수있다 amp-img > img { object-fit: contain; }

Heres 완전한보기 나의 페이지 심상을 정확한 가늠자에 지키기 위하여 25,000의 페이지의 맞은 편에 사용한다.

<div class="image"><amp-img width="400" height="225" layout="fill" src="foo.jpg"></amp-img></div>

너비/높이 물로서 폭 나던 양해 유지 레이아웃 = "채우기"사용시 용기의 높이 자체를 100 %로 설정.