I have the cropWidth, cropHeight and the start co-ordinates of the image from which I need to crop.
How should I crop an <amp-img>
using these information ?
For example, if the dimensions of the image is 10 X 10, and suppose cropwidth is 2 and cropheight is 3 and the start location is 3,5. This means I want the part of the image described by the rectangle with (3,5) as the top-left point and (5,8) as the top-right point.
The following is what I have tried and it is not working properly:
HTML code
<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 code:
.cropped2 {
width: 100px; /* width of container */
height: 100px; /* height of container */
object-fit: cover;
object-position: 20% 10px;
border: 5px solid black;
}
Can someone tell why this is not working and give a working solution for the same?
Next time, try inserting the working code so that it can be run. Look at my example.
Like your code: I'm not sure if the option with
layout= "responsive"
andobject-fit: cover
is a good idea. Look at my example, I hope it will help you.