2

首先，请考虑这个fiddle。

我需要在特定图像区域上获取一些链接，但是这些图像是根据父大小缩放的……这就是为什么链接的位置和大小与图像相对（百分比）的原因。但是小提琴显示了这种方法的问题。

有没有办法让.image-wrapper“模仿”img缩放后的大小和位置？！有什么诀窍之类的吗？

注意：我可以接受仅限 webkit 的解决方案！

编辑 1

实际上，我更专注于使图像适合内容 div，然后使图像包装器遵循生成的图像大小。这是我到目前为止所取得的成就...... 现在我正试图让它与集中的图像一起工作。

4

2 回答 2

1

一种可能的方法是使用 Jquery 处理图像比例并根据图像尺寸调整链接比例和边距。

看看这个例子小提琴：http: //jsfiddle.net/t7Ucj/

Js 测量图像的宽度和高度，并根据其比例，它适用于链接的宽度或高度。

var width = $('#content2 img').width();
var height =  $('#content2 img').height();
//vertical image
if(height > width){
   var left = $('#content2 img').css('margin-left');
    $('#content2 .sample-link').css({'width':  width, 'left' : left});
 }
else{
  var top = $('#content2 img').css('margin-top');
   $('#content2 .sample-link').css({'height':  height*0.2, 'top' : top + height*0.4});

 }

然后，您显然可以将所有指令包装在一个简单的函数中。

我知道放置所有可能的情况可能很棘手，但我遇到了类似的问题并以这种方式解决了。

希望能帮助到你

于 2013-10-28T11:08:36.893 回答
1

这是解决方案的 CSS 框架。

假设您的 HTML 如下所示：

<div id="content1" class="content portrait">
    <div class="panel-wrapper">
        <div class="image-wrapper">
            <img src="http://placekitten.com/200/250" />
            <a href="#" class="sample-link"></a>
        </div>
    </div>
</div>
<div id="content2" class="content landscape">
    <div class="panel-wrapper">
        <div class="image-wrapper">
            <img src="http://placekitten.com/300/200" />
            <a href="#" class="sample-link"></a>
        </div>
    </div>
</div>

HTML 类似于您的原始代码，只是多了一个 wrapper .panel-wrapper。

我使用了以下 CSS：

.content {
    background: lightgray;
    display: table;
    margin: 40px 0;
}
#content1 {
    width:100px;
    height:150px;
}
#content2 {
    width:150px;
    height:150px;
}
.panel-wrapper {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.image-wrapper {
    outline: 1px solid green;
    position:relative;
    display: inline-block;
}
.content img {
    display: block;
    width: 100%;
}
.portrait .image-wrapper {
    height: calc(100% - 2px);
}
.portrait .img {
    height: 100%;
}
.landscape .image-wrapper {
    width: calc(100% - 2px);
}
.landscape .img {
    width: 100%;
}
.sample-link {
    background:rgba(0, 0, 255, 0.3);
    position:absolute;
    display:block;
    width: 50%;
    height:20%;
    top:5%;
    left:5%;
}

我申请和申请display: table，以便我可以获得垂直和水平居中的图像。.contentdisplay: table-cell.panel-wrapper

.image-wrapper有display: inline-block。_

要获得正确的缩放比例，您需要根据图像的纵横比考虑两种情况。

对于纵向图像，适用height: 100%于.image-wrapper和 child img。

对于风景图像，width: 100%分别应用。

如果你有一个边框.image-wrapper，使用 CSScalc()函数来调整边框的 2px 宽度。

您需要做的是使用 JavaScript/jQuery 确定图像的纵横比，然后将正确的类（.portrait或.landscape）应用于.content块。

参见演示：http: //jsfiddle.net/audetwebdesign/SZjvJ/

于 2013-10-28T11:44:33.060 回答