Drei Methoden in HTML zum Implementieren des img-Tags, um nur den Beispielcode in der Mitte des Bildes anzuzeigen

html in img-Tag zeigt derzeit die Methode Bild zentriert an Ich kenne drei Methoden. Der Herausgeber wird sie auf der Script House-Plattform weitergeben.

Es gibt derzeit drei Methoden, um das Bildcenter in HTML anzuzeigen wird sie hier aufzeichnen.

Der erste Typ: using css clip:rect(top right unten links ); Verwendung muss mit Position verwendet werden: absolut: wie folgt

<img src="http://img2.utuku.china.com/640x0/news/20170210/77b8b5ca-11d3-4307-9a93-c12df5eb1a35.jpg"
     style="position: absolute;clip: rect(0px,250px,200px,50px);width: 300px;height: 200px">

zum Festlegen der Breite und Breite des Bildes. Die Höhe entspricht der proportionalen Skalierung der tatsächlichen Breite und Höhe des Bildes und verwendet dann die Rect-Methode, um den Beschneidungsbereich des Bildes festzulegen >Attribute

:

Verwenden Sie den Hintergrund, um die Mittelposition der Bildanzeige zu steuern. Sie müssen den Hintergrund entsprechend einstellen Skalieren Sie proportional zur tatsächlichen Breite des Bildes und versetzen Sie dann den Bewegungsbetrag des Hintergrunds, um die Breite und Höhe des Bildes zu steuern Wenn src nicht festgelegt wird, wird auf dem angezeigten Bild ein grauer Rand angezeigt, und es gibt keine Möglichkeit, ihn zu entfernen. bord

er:0px funktioniert auch nicht transparentes Bild in src und das würde es lösen. >Die dritte Methode: img in p einschließen, p's

overflow
verwenden, um es zu steuern, ist es flexibler zu verwenden,

<style type="text/css">
        img {
            background-image: url(http://img2.utuku.china.com/640x0/news/20170210/77b8b5ca-11d3-4307-9a93-c12df5eb1a35.jpg);//设置背景图片
            background-repeat: no-repeat;//背景图像将仅显示一次。
            background-attachment: scroll;//
            background-position: -50px 0px;//设置背景图片的的偏移量，这个-50相当于背景整体向左偏移50，就可以显示图片的中心
            background-size: 300px 200px;////设置背景图片的大小，相当于图片实际宽高等比例饿缩放的
            background-color: transparent;//
            width: 200px;//
            height: 200px;//
        }
    </style>

Der obige Kommentar ist bereits sehr klar, hauptsächlich steuert p die Größe und das img-Tag passt seine Größe entsprechend der Größe von p an , um den mittleren Teil des Bildes anzuzeigen. Ich persönlich denke, dass die dritte Methode einfacher ist

Das obige ist der detaillierte Inhalt vonDrei Methoden in HTML zum Implementieren des img-Tags, um nur den Beispielcode in der Mitte des Bildes anzuzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!