如何正確設置寬度和AMP-IMG的高度屬性

我目前在做我的網站AMP -ified我的網站是建立在引導，因此我的大部分圖片的我只設置像這樣一切響應的過程：如何正確設置寬度和AMP-IMG的高度屬性

img{ 
    width:100%; 
    height:auto; 
}

然而問題進出口運行與我的amp-img是，它需要一個width和height要在圖像上設置。什麼是amp使響應圖像的正確方法是反正有做沒有設置height和width？

來源

2016-09-26 NooBskie

不知道你的圖像的寬度或高度來顯示圖像的唯一辦法就是給它第l ayout attribute fill，並與加它具有以下css property object-fit設置爲包含一個元素包裹。

.ampImg__Wrapper { 
    object-fit: contain; 
}

來源

2016-12-27 12:07:08

的amp需要的尺寸要在標籤的一個原因

你擺在那裏是amp-script用來產生一個佔位符尺寸大小。佔位符跳轉各地停止內容，而圖像加載。

話雖這麼說，只是把有機圖像尺寸在標籤和使用以下兩個屬性在CSS，以確保圖像發揮好

（請確保您添加的課程選擇）

{ 
 
    max-width: 100%; 
 
    height: auto; 
 
}

來源

2016-12-27 12:16:44

的AMP方式來實現THA t是通過使用layout屬性。在AMP-IMG，您指定的來源，本地身高和體重;與格式sourceset，在「CSS像素」（例如96PX /英寸）爲您與layout= responsive響應圖像就大功告成了。 AMP將維持h/w比率。

Ex。

<amp-img 
    src="/img/small.jpg" 
    srcset="/img/medium.jpg 640w, 
      /img/small.jpg 320w" 
    width="1800" 
    height="2777" 
    layout="responsive" 
    alt="Don't forget to add one"> 
</amp-img>

在這個例子中，layout="responsive"將由所述AMP引擎，因爲被指定的圖像尺寸和格式推斷。當未定義高度和寬度時，默認佈局是「容器」（例如，像普通的div）。

還可以包括放大器，放大器IMG媒體查詢。前面的例子可以這樣設置：

<amp-img 
    media="(max-width: 639px)" 
    src="/img/small.jpg" 
    width="450" 
    height="694" 
    layout="responsive" 
    alt="Don't forget to add one"> 
</amp-img> 
<amp-img 
    media="(min-width: 639px)" 
    src="/img/medium.jpg" 
    width="900" 
    height="1388" 
    layout="responsive" 
    alt="Don't forget to add one"> 
</amp-img>

在這種情況下，「媒體」屬性將優先於適應性選擇（但它使假如你想在強制某種形象，除了幾乎沒有實際的區別一定的屏幕尺寸）。

對於一個很好的概述：https://www.ampbyexample.com/advanced/layout_system/

希望這有助於

來源

2017-06-16 15:18:49 bFavreault

如何正確設置寬度和AMP-IMG的高度屬性

回答

相關問題