文章/答案/技术大牛

发布

社区首页 >问答首页 >在AMP-HTML中裁剪图像

问在AMP-HTML中裁剪图像
EN

Stack Overflow用户

提问于 2020-07-07 23:28:10

回答 1查看 187关注 0票数 1

我有需要裁剪的图像的cropWidth、cropHeight和start坐标。如何使用这些信息裁剪<amp-img>？

例如，如果图像的尺寸为10 X 10，假设cropwidth为2，croph八为3，起始位置为3,5。这意味着我希望使用(3,5)作为左上点，(5,8)作为右上点的矩形所描述的图像部分。

以下是我尝试过的，但它不能正常工作：

HTML代码

<div style="width:400px;height:200px;position: relative;">
        <amp-img class="cropped2" width="2px" height="1px" layout="responsive" src="https://hips.hearstapps.com/ghk.h-cdn.co/assets/17/30/2560x1280/landscape-1500925839-golden-retriever-puppy.jpg?resize=480:*">
        </amp-img>
</div>

CSS代码：

.cropped2 {
         width: 100px; /* width of container */
            height: 100px; /* height of container */
            object-fit: cover;
            object-position: 20% 10px; 
            border: 5px solid black;
    }

有没有人能告诉我为什么这样做不起作用，并给出一个同样有效的解决方案？

crop

amp-html

amp-img

回答 1

Stack Overflow用户

发布于 2020-07-08 03:58:10

下一次，尝试插入工作代码，以便它可以运行。看看我的例子。

喜欢你的代码:我不确定layout= "responsive"和object-fit: cover的选项是不是一个好主意。看看我的例子，我希望它能对你有所帮助。

<!doctype html>
<html amp lang="en">

<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Hello, AMPs</title>
  <link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "NewsArticle",
      "headline": "Open-source framework for publishing content",
      "datePublished": "2015-10-07T12:02:41Z",
      "image": [
        "logo.jpg"
      ]
    }
  </script>
  <style amp-boilerplate>
    body {
      -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
      -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
      -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
      animation: -amp-start 8s steps(1, end) 0s 1 normal both
    }

    @-webkit-keyframes -amp-start {
      from {
        visibility: hidden
      }

      to {
        visibility: visible
      }
    }

    @-moz-keyframes -amp-start {
      from {
        visibility: hidden
      }

      to {
        visibility: visible
      }
    }

    @-ms-keyframes -amp-start {
      from {
        visibility: hidden
      }

      to {
        visibility: visible
      }
    }

    @-o-keyframes -amp-start {
      from {
        visibility: hidden
      }

      to {
        visibility: visible
      }
    }

    @keyframes -amp-start {
      from {
        visibility: hidden
      }

      to {
        visibility: visible
      }
    }
  </style><noscript>
    <style amp-boilerplate>
      body {
        -webkit-animation: none;
        -moz-animation: none;
        -ms-animation: none;
        animation: none
      }
    </style>
  </noscript>

  <style amp-custom>
    .wrapper {
      margin: 15px;
      position: relative;
    }

    .wrapper_one {
      height: 100px;
      width: 100px;
    }

    .wrapper_two {
      height: 150px;
      width: 300px;
    }

    .cropped2 img {
      object-position: 20% 10px;
      border: 5px solid black;
      object-fit: cover;
    }
  </style>
</head>

<body>

  <h1>Welcome to the mobile web</h1>

  <div class="wrapper wrapper_one">
    <amp-img class="cropped2" layout="fill" src="https://hips.hearstapps.com/ghk.h-cdn.co/assets/17/30/2560x1280/landscape-1500925839-golden-retriever-puppy.jpg?resize=480:*">
    </amp-img>
  </div>

  <div class="wrapper wrapper_two">
    <amp-img class="cropped2" layout="fill" src="https://hips.hearstapps.com/ghk.h-cdn.co/assets/17/30/2560x1280/landscape-1500925839-golden-retriever-puppy.jpg?resize=480:*">
    </amp-img>
  </div>

</body>

</html>

https://codepen.io/alexandr-kazakov/pen/ZEQxqKE

Also在官方网站上查看示例：https://amp.dev/documentation/examples/style-layout/how_to_support_images_with_unknown_dimensions/?format=websites

Codepen：

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62778698

复制

相似问题

问在AMP-HTML中裁剪图像
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在AMP-HTML中裁剪图像EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在AMP-HTML中裁剪图像
EN