Question

好的，对不起那些大名鼎鼎的家伙。但大部分标题都解释了我的需求。

我有一个HTML页面，可以在屏幕上显示图像。基本上它是在全屏（非常宽的屏幕上的大问题），我正在使用：https://github.com/davidjbradshaw/imagemap-resizer 要调整我创建的地图的大小。

以下是我的HTML代码：

    <body>

    <img id="imgg" src="imgs/SampleImage.png" height="100%" width="100%" style="max-height:1414px; max-width:1414px;" alt="Page" usemap="#image_map" border="0">

    <map name="image_map" id="image_map">
        <area shape="poly" coords=" 104,693, 250,702, 219,1203, 105,1208, 105,692" href="http://wordpress.com" alt="Blog"/>

        <area shape="poly" coords=" 376,879, 521,880, 522,1035, 375,1037, 375,880" href="https://www.facebook.com/" alt="Facebook Page"/>
        <area shape="poly" coords=" 558,882, 705,883, 705,1036, 563,1036, 559,885" href="https://www.facebook.com/" alt="Facebook Page"/>

        <area shape="poly" coords=" 364,1045, 716,1047, 710,1082, 370,1085, 367,1044" href="https://twitter.com/" alt="Twitter Page"/>

        <area shape="poly" coords=" 294,1036, 344,1055, 361,1035, 368,917, 370,901, 310,916, 297,945, 292,978, 290,1037, 301,1037" href="https://www.pinterest.com/" alt="Pinterest"/>

        <area shape="poly" coords=" 529,898, 555,898, 551,1017, 536,1021, 531,901" href="https://www.pinterest.com/" alt="Pinterest"/>

        <area shape="poly" coords=" 718,1033, 715,904, 771,922, 789,1037, 744,1050, 722,1033" href="https://www.pinterest.com/" alt="Pinterest"/>
    </map>

</body>

<!--[if lte IE 8]>
    <script type="text/javascript" src="js/ie8.polyfil.js"></script>
<![endif]-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/imageMapResizer.min.js"></script>
<script type="text/javascript">

    $('map').imageMapResize();

</script>

我只是希望图像显示在页面上，但是在一定高度（图像最大高度和最大宽度）之后，它不应该允许图像被拉伸而是显示背景颜色。

我也在img标签的“style”部分尝试使用max-height和max-width属性。不工作。并且高度=“100％”和宽度=“100％”是为了确保图像看起来不太大，这是一张1000x1000的图片，所以在较小的设备上他们必须滚动，这就是为什么我用这个。谢谢大家的帮助！

Answer 1

好吧，看起来没有人能够提供帮助。但我自己想出来了！

所以我将与大家分享这个秘密。基本上它不是一个秘密，我使用了一个肮脏的小javascript技巧而不是一个html / css技巧。它将查看图像高度，检查高度是否小于宽度，或者宽度是否小于高度，并将其中一个设置为较小的高度。例如：高度= 1000px width = 800px

现在JavaScript代码将检查哪一个更小，然后将高度/宽度设置为更小的尺寸（请记住这是一个SQUARE图像）：身高= 800px width = 800px

以下是代码：

    <script>
var img = document.getElementById('imgg'); 
var width = img.clientWidth;
var height = img.clientHeight;

if (width < height) {
img.style.height=width;
}

if (height < width) {
img.style.width=height;
}

</script>

重新映射html图像链接+适合屏幕+最大高度和宽度

1 个答案: