html - 图像不会在 html 页面中溢出

Question

我想知道是否可以像这样转换网页:

为此:

?

用于获取第一张图片的部分代码正在开发中:

/** CSS **/
div.Testata35, div.Testata25, div.Testata70Inner, div.Testata29Inner, div.Testata15Inner {
    background-color: #C0C0C0;
    float: left;
}
div.Testata35, div.Testata25 {
    margin-bottom: 0.2%;
    margin-right: 1%;
    margin-top: 0.2%;
    padding-bottom: 0.2%;
    padding-left: 1%;
    padding-top: 0.2%;
}
div.Testata35 {
    width: 35.5%;
}
div.Testata25 {
    width: 23%;
}
div.Valore35, div.Valore25 {
    float: left;
    margin-top: 0.2%; 
    overflow: auto;
    padding-bottom: 0.2%;
    padding-left: 1%;
    padding-top: 0.2%;
}
div.Valore35 {
    margin-right: 2.5%;
    width: 34%;
}
div.Valore25 {
    margin-right: 1%;
    width: 23%; 
}
<!--  HTML -->
<div class="ClrOvFlw">
        <div class="PrimaSx">
            <div class="ClrOvFlw">
                <div id="T1" class="Testata35">Modello</div>
                <div id="T1A" class="Testata35">Linea</div>
                <div id="T2" class="Testata25A">
                    <div style="clear: left; float: left; width: 70%;">Standard</div>
                    <div style="clear: right; float: right; width: 20%; z-index: 1; overflow: auto;">
                        <img id="V25BImg" src="./FotoNorma/standard01-ITA.jpg" alt="Marchio Normativa">
                    </div>
            </div>
            <div class="ClrOvFlw">
                <div id="V1" class="Valore35">BELLARIA</div>
                <div id="V1A" class="Valore35">MODULAR</div>
                <div id="V2" class="Valore25A">EN ISO 20345:2011</div>
            </div>
        </div>
        <div class="Valore25B">
        </div>
    </div>
<div class="ClrOvFlw">
        <div id="T3" class="Testata35">Codice Articolo</div>
        <div id="T4" class="Testata35">Protezione</div>
        <div id="T5" class="Testata25">Disponibilit&agrave; a Magazzino</div>
    </div>
    <div class="ClrOvFlw">
        <div id="V3" class="Valore35">83297-07LL</div>
        <div id="V4" class="Valore35">S1P SRC</div>
        <div id="V5" class="Valore25">
            <img id="V5Img" src="FotoMagazzino\maga2-ITA.jpg" alt="Disponibilità">
        </div>
    </div>

如您所见，我尝试了一些方法来实现第二张图片中显示的结果，但没有成功。 旁注:我不是专业的 HTML/CSS 开发人员，所以我的“代码”并不是作为最佳实践提示编写的。

编辑:

正如你们中的许多人所建议的，我以这种方式更新了我的代码:

<div class="ClrOvFlw">
                <div id="T1" class="Testata35">Modello</div>
                <div id="T1A" class="Testata35">Linea</div>
                <div id="T2" class="Testata25A">
                    <div style="float: left; clear: left;">Standard</div>
                    <div class="Valore25B" style="float: right; clear: right; position: relative;">
                        <img id="V25BImg" src="./FotoNorma/standard01-ITA.jpg" alt="Marchio Normativa" style="position: absolute; display : block; width: 100%; height: 100%;">
                    </div>
                </div>
            </div>

与上面相同的 CSS。我的结果:

编辑 2:

根据 Fils 的建议，我更新了我的代码如下:

<div id="T2" class="Testata25A">
    <div style=" clear: left; float: left;">Standard</div>
    <div class="Valore25B" style="position: relative; overflow: auto;">&nbsp;
        <img id="V25BImg" src="./FotoNorma/standard01-ITA.jpg" alt="Marchio Normativa" style="position: absolute; right: 0px;overflow: visible; height: 100px;">
    </div>
</div>

得到这个结果:

伙计们，我想我在听从您的提示时做错了什么。

Answer 1

你可以使用 position:absolute;在该图像上，如果您可以保证始终有足够的空间来显示整个图像:

div#V25BImg{
  display:block;
  position:absolute;
  width:[WIDTH]px;
  height:[HEIGHT]px;  
}

您可能还需要添加 position:relative;在图像的父级上，以确保绝对定位元素将放置在页面的正确部分。