jquery - 响应式设计 : keeping proper offset for images that overlap

Question

在我正在开发的响应式网站上，为了显示一些产品，有 2 张图片:1 张用于书籍封面，1 张用于所选装订(法语为“reliure”)。参见 https://www.cemeq.qc.ca/fiche-produit/#/#Produit:81或以下屏幕截图:

全尺寸时，封面图片为 464 像素宽 x 600 像素高，装订图片为 484 像素 x 610 像素。封面图应与装订图右下角对齐，水平偏移20px，垂直偏移10px。

当你检查链接时，你可以看到我几乎明白了，但是在某些分辨率下有一些小故障，封面图像不再正确定位与绑定(bind)图像相关(当屏幕宽度超过时你可以清楚地看到它2000 像素或低于 700 像素)。

对于所有分辨率，我都不知道如何解决这个问题。有没有人已经做过类似的事情或对如何做有想法？我更喜欢纯 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