Question

我一直在寻找答案，但我找不到答案...... 基本上，我试图放入一些图像作为链接的预览图像;图像和链接通过按下图标时执行的javascript命令显示。但是，出于某种原因，无论我尝试做什么，图像都不会调整大小。我试图寻找解决方案，但由于某种原因没有任何工作。这是相关代码：

＆＃13;

    html.body {
    height: 100%;
}

.sectionbox {
    position: absolute;
    margin: auto;
    left: 0%;
    right: 0%;
    top: 0%;
    bottom: 0%;
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
}
.bigiconlinkbox_above {
    background-image: url('/images/bg1_top.png');
    background-position: bottom;
    position: relative;
    padding-top: 32px;
    text-align: center;
    flex: 1;
}
.bigiconlinkbox {
    background-image: url('/images/bg1_mid.png');
    background-position: center;
    position: relative;
    margin: auto;
    width: 100%;
    text-align: center;
    height: 64px;
}
.bigiconlinkbox_below {
    background-image: url('/images/bg1_bot.png');
    background-position: top;
    position: relative;
    padding-top: 32px;
    text-align: center;
    flex: 1;
}

.bigiconlink {
    display: inline-block;
    float: initial;
    margin: 2px 16px;
}

#js_target1 {
    /*text-align: right !important;*/
}
#js_target2 {
    /*text-align: right !important;
    */
}
.descimageholder {
    /*text-align: right !important;
    */
    width: 64px;
    height: auto;
}

.descimage {
    display: block;
    width: 64px;
    height: 64px;
}

＆＃13;

@{
    ViewData["Title"] = "Pictures";
}
<div class="sectionbox">
    <div class="bigiconlinkbox_above">
        <h2>Pictures</h2></br>
    </div>
    <div class="bigiconlinkbox">
        <div class="bigiconlink">
            <a href="" id="js_link1"><img src="~/images/a.gif" alt="a" class="img-responsive" /></a>
        </div>
        <div class="bigiconlink">
            <a href="" id="js_link2"><img src="~/images/b.gif" alt="b" class="img-responsive" /></a>
        </div>
    </div>
    <div class="bigiconlinkbox_below">
        <div id="js_target1">Title</div></br>
        <div id="js_target2">Click on an icon for a description.</div>
        <div id="js_target3" class="descimageholder">s</div>
    </div>
</div>

<script type="text/javascript">
    document.getElementById('js_link1').onclick = showDesc1;
    function showDesc1() {
        document.getElementById("js_target1").innerHTML = "<a href=\"(some url)</a>";
        document.getElementById("js_target2").innerHTML = "description";
        document.getElementById("js_target3").innerHTML = "<img class=\"descimage\" src=\"/images/c.png\" />";
        return false;
    }
    document.getElementById('js_link2').onclick = showDesc2;
    function showDesc2() {
        document.getElementById("js_target1").innerHTML = "b";
        document.getElementById("js_target2").innerHTML = "description";
        return false;
    }
</script>

＆＃13;

请注意，我需要在新年前完成这项工作。

Answer 1

从上面的问题来看，我希望我理解得很好。这是我用来预览个人资料图片的脚本。

<img src='url_here' height=51 width=50 style='border-radius: 5px;'>

我希望这是你问题的答案。它将图片调整为缩略图或预览。您可以根据需要更改高度和宽度。

css：图片不会调整大小

1 个答案: