我有裁剪宽度，裁剪高度和我需要裁剪的图像的起始坐标。 我应该如何使用这些信息裁剪<amp-img>？
例如，如果图像的尺寸为 10 X 10，假设裁剪宽度为 2，裁剪高度为 3，起始位置为 3,5。这意味着我想要矩形描述的图像部分，其中 (3,5( 作为左上点，(5,8( 作为右上角。
以下是我尝试过的，它无法正常工作：
网页代码
<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;
}有人可以说出为什么这不起作用并给出有效的解决方案吗？
下次，请尝试插入工作代码，以便可以运行它。看看我的例子。
就像你的代码一样：我不确定带有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
- 另请查看官方网站上的示例： https://amp.dev/documentation/examples/style-layout/how_to_support_images_with_unknown_dimensions/?format=websites