响应式设计：为重叠的图像保持适当的偏移

Question

在我正在处理的响应式网站上，显示一些产品有2个图像：1个用于书籍封面，1个用于所选择的装订（法语中的“reliure”）。请参阅https://www.cemeq.qc.ca/fiche-produit/#/#Produit:81或以下屏幕截图：

全尺寸时，封面图片宽464像素，高600像素，装订图片为484像素×610像素。封面图片应在装订图片的右下方对齐，因此水平偏移20px，垂直偏移10px。

当您检查链接时，您可以看到我差不多了，但在某些分辨率下会出现毛刺，其中封面图像不再正确定位与绑定图像有关（当屏幕宽度超过时您可以清楚地看到它） 2000px或低于700px）。

我不知道如何为所有分辨率修复此问题。有没有人已经做过类似的事情或有关于如何做到这一点的想法？我更喜欢HTML / CSS解决方案，但我并不反对使用jQuery

这是我到目前为止的代码： HTML

<div class="column column-6 media-20-column-18 big-column margin-r-3p background-white padding-tb-7 text-c relative-height p-r" style="height: 812px;">
    <div class="p-r">       
        <img id="imgReliure" ng-hide="Product.isKit" src="https://dev.cemeq.qc.ca/assets/imgSpirale_2016.png">          
        <div class="container-imgCover">
            <img id="imgCover" src="https://dev.cemeq.qc.ca/covers/img1033_01_00_A_Cover.png">
        </div>          
    </div>                  
</div>

CSS

.container-imgCover 
{
    width: 96%; 
    height: 98.4%;
    position: absolute;
    right:0;
    bottom:0;
}
#imgReliure
{
    position: relative; 
    z-index: 999; 
    bottom:0; 
    right: 0;
}
.p-r {position:relative;}
.text-c {text-align:center;}

完整的CSS：https://www.cemeq.qc.ca/data/themes/cemeq/style.css?ver=4.5.1

Answer 1

尝试使用媒体查询来定义要在每种屏幕尺寸中使用的px

Here you can find an example