原图:
Heim Web-Frontend js-Tutorial JS+CSS设置img在DIV中只显示Img垂直居中的部分_javascript技巧

JS+CSS设置img在DIV中只显示Img垂直居中的部分_javascript技巧

May 16, 2016 pm 05:19 PM
div img

一个Div中显示Img,img的宽和Div相同,但高不固定,要求只显示Img垂直居中的部分。

示例:
JS+CSS设置img在DIV中只显示Img垂直居中的部分_javascript技巧 

原图:
JS+CSS设置img在DIV中只显示Img垂直居中的部分_javascript技巧

代码实现:

复制代码 代码如下:


JS+CSS设置img在DIV中只显示Img垂直居中的部分_javascript技巧onload="this.style.marginTop = (parseInt(this.parentNode.style.height) - this.height)/2 + 'px';this.style.marginLeft = (parseInt(this.parentNode.style.width) - this.width) /2 + 'px'" />


点击下载源文件
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So öffnen Sie die IMG-Datei So öffnen Sie die IMG-Datei Sep 18, 2023 am 09:40 AM

Zu den Methoden zum Öffnen von IMG-Dateien gehören die Verwendung von Software für virtuelle optische Laufwerke, die Verwendung von Komprimierungssoftware und die Verwendung spezieller Tools. Detaillierte Einführung: 1. Verwenden Sie die Software für virtuelle optische Laufwerke, um eine Software für virtuelle optische Laufwerke zu öffnen, herunterzuladen und zu installieren. Klicken Sie mit der rechten Maustaste auf die IMG-Datei, wählen Sie „Öffnen mit“ oder „Zugehöriges Programm“ und wählen Sie im Popup die installierte Software für virtuelle optische Laufwerke aus -up-Dialogfeld, virtuell Die Software des optischen Laufwerks lädt die IMG-Datei automatisch und verwendet sie als Disc-Image im virtuellen optischen Laufwerk. Doppelklicken Sie auf das Disc-Symbol im virtuellen optischen Laufwerk, um die IMG-Datei zu öffnen und auf deren Inhalt zuzugreifen. usw.

So öffnen Sie die IMG-Datei So öffnen Sie die IMG-Datei Jul 06, 2023 pm 04:17 PM

So öffnen Sie die IMG-Datei: 1. Bestätigen Sie den IMG-Dateiöffner. 3. Wählen Sie die Öffnungsmethode. 5. Speichern Sie das Bild. Die IMG-Datei ist ein häufig verwendetes Bilddateiformat, das normalerweise zum Speichern von Bilddaten verwendet wird.

Was ist das Format von img? Was ist das Format von img? Mar 17, 2023 am 10:33 AM

img ist ein Dateikomprimierungsformat, das hauptsächlich zum Erstellen von Disketten-Image-Dateien verwendet wird. Es kann zum Komprimieren des Inhalts einer gesamten Diskette oder einer gesamten CD verwendet werden. Die IMG-Datei enthält drei grundlegende Knoten, nämlich „Ehfa_HeaderTag“, „Ehfa_File“ und „Ehfa_Entry“.

Wie man mit CSS erkennt, dass einem Div eine Ecke fehlt Wie man mit CSS erkennt, dass einem Div eine Ecke fehlt Jan 30, 2023 am 09:23 AM

CSS-Methode, um zu erkennen, dass einem Div eine Ecke fehlt: 1. Erstellen Sie eine HTML-Beispieldatei und definieren Sie ein Div. 2. Legen Sie die Hintergrundfarbe für die Breite und Höhe des Div fest. 3. Fügen Sie dem zu löschenden Div eine Pseudoklasse hinzu eine Ecke und setzen Sie die Pseudoklasse auf „Die gleiche Farbe wie die Hintergrundfarbe verwenden“, drehen Sie sie dann um 45 Grad und positionieren Sie sie dann an der Ecke, die entfernt werden muss.

Implementierung eines Browserskripts zur Wortmarkierungsübersetzung basierend auf der ChatGPT-API Implementierung eines Browserskripts zur Wortmarkierungsübersetzung basierend auf der ChatGPT-API May 01, 2023 pm 03:28 PM

Vorwort Seit Kurzem gibt es auf GitHub ein Browser-Skript, das neben der Browser-Plugin auch Polier- und Zusammenfassungsfunktionen unterstützt -ins, es verwendet auch Tauri-Paketierung, abgesehen von der Tatsache, dass Tauri den Rust-Teil verwendet, ist der Browser-Teil immer noch relativ einfach zu implementieren. Heute werden wir ihn manuell implementieren. Über die von openAI bereitgestellte Schnittstelle können wir beispielsweise den folgenden Code kopieren und in der Browserkonsole eine Anfrage initiieren, um die Übersetzung abzuschließen //Beispiel constOPENAI_API_KEY="s

Was ist das Div-Box-Modell? Was ist das Div-Box-Modell? Oct 09, 2023 pm 05:15 PM

Das div-Box-Modell ist ein Modell, das für das Webseiten-Layout verwendet wird. Es behandelt Elemente auf einer Webseite als rechteckige Boxen. Dieses Modell enthält vier Teile: Inhaltsbereich, Innenabstand, Rand und Rand. Der Vorteil des Div-Box-Modells besteht darin, dass es das Layout der Webseite und den Abstand zwischen Elementen leicht steuern kann. Durch Anpassen der Größe des Inhaltsbereichs, des Innenrands, des Rands und des Außenrands können verschiedene Layouteffekte erzielt werden Das Box-Modell bietet außerdem einige Eigenschaften und Methoden, mit denen der Stil und das Verhalten der Box über CSS und JavaScript dynamisch geändert werden können.

Was sind die Unterschiede zwischen div und span? Was sind die Unterschiede zwischen div und span? Nov 02, 2023 pm 02:29 PM

Die Unterschiede sind: 1. div ist ein Element auf Blockebene und span ist ein Inline-Element. 2. div belegt automatisch eine Zeile, während span nicht automatisch umgebrochen wird. 3. div wird zum Umschließen größerer Strukturen und Layouts verwendet span wird zum Umschließen von Text oder anderen Inline-Elementen verwendet. 4. div kann andere Elemente auf Blockebene und Inline-Elemente enthalten, und span kann andere Inline-Elemente enthalten.

Was ist der Unterschied zwischen iframe und div? Was ist der Unterschied zwischen iframe und div? Aug 28, 2023 am 11:46 AM

Der Unterschied zwischen iframe und div besteht darin, dass iframe hauptsächlich zum Einführen externer Inhalte verwendet wird, die Inhalte von anderen Websites laden oder eine Webseite in mehrere Bereiche unterteilen können. Jeder Bereich verfügt über einen eigenen unabhängigen Browsing-Kontext, während div hauptsächlich zum Unterteilen von und verwendet wird Organisieren Sie den Inhaltsblock zur Layout- und Stilkontrolle.

See all articles