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

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

css twitter-bootstrap

Css 重新映射html图像链接+适合屏幕+最大高度和宽度,css,twitter-bootstrap,imagemap,Css,Twitter Bootstrap,Imagemap,好吧，对不起，伙计们，这是个大标题。但大部分的标题解释了我需要什么我有一个HTML页面，可以在屏幕上显示图像。基本上，这是全屏的大问题，在非常宽的屏幕上，我使用：调整我创建的地图的大小以下是我的HTML代码： <body> <img id="imgg" src="imgs/SampleImage.png" height="100%" width="100%" style="max-height:1414px; max-width:1414px;" alt

好吧，对不起，伙计们，这是个大标题。但大部分的标题解释了我需要什么

我有一个HTML页面，可以在屏幕上显示图像。基本上，这是全屏的大问题，在非常宽的屏幕上，我使用：调整我创建的地图的大小

以下是我的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标签的样式部分尝试使用max height和max width属性。不起作用。高度=100%，宽度=100%是为了确保图像看起来不太大，这是一张1000x1000的图片，所以在较小的设备上，他们必须滚动，这就是我为什么使用这个。谢谢大家的帮助

好吧，看来没人能帮上忙。但我自己想出来了

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

现在JavaScript代码将检查哪一个更小，然后将高度/宽度设置为更小的尺寸请记住这是一个方形图像：高度=800px 宽度=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>