Mengubah posisi gambar di html

Question

Properti object-position CSS menentukan perataan konten elemen pengganti yang dipilih di dalam kotak elemen. Area kotak yang tidak tercakup oleh objek elemen yang diganti akan menampilkan latar belakang elemen

Table of Contents Show

Bagaimana cara mengubah perataan gambar dalam HTML?
Bagaimana cara memindahkan gambar ke kiri dalam HTML?
Bagaimana cara memindahkan posisi gambar di CSS?
Bagaimana cara mengubah posisi gambar di JavaScript?

Anda dapat menyesuaikan bagaimana ukuran intrinsik objek elemen yang diganti (yaitu, ukuran aslinya) disesuaikan agar muat di dalam kotak elemen menggunakan properti object-fit

/* Keyword values */
object-position: top;
object-position: bottom;
object-position: left;
object-position: right;
object-position: center;

/* <percentage> values */
object-position: 25% 75%;

/* <length> values */
object-position: 0 0;
object-position: 1cm 2cm;
object-position: 10ch 8em;

/* Edge offsets values */
object-position: bottom 10px right 20px;
object-position: right 3em bottom 10px;
object-position: top 0 right 10px;

/* Global values */
object-position: inherit;
object-position: initial;
object-position: revert;
object-position: revert-layer;
object-position: unset;

<position>_

Dari satu hingga empat nilai yang menentukan posisi 2D elemen. Offset relatif atau absolut dapat digunakan

Catatan. Posisinya dapat diatur sehingga elemen yang diganti ditarik keluar dari kotaknya

Nilai awal50% 50%Berlaku untuk elemen yang digantiInheritedyesPersentasemengacu pada lebar dan tinggi elemen itu sendiriNilai yang dihitungsebagaimana ditentukanJenis animasidaftar berulang dari daftar sederhana panjang, persentase, atau kalk

object-position = 
  <position>  

<position> = 
  [ left | center | right ] || [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  

<length-percentage> = 
  <length>      |
  <percentage>

_

HTML

Di sini kita melihat HTML yang menyertakan dua elemen <img>, masing-masing menampilkan logo MDN

<img id="object-position-1" src="mdn.svg" alt="MDN Logo" />
<img id="object-position-2" src="mdn.svg" alt="MDN Logo" />

CSS

CSS menyertakan gaya default untuk elemen <img> itu sendiri, serta gaya terpisah untuk masing-masing dari dua gambar

img {
  width: 300px;
  height: 250px;
  border: 1px solid black;
  background-color: silver;
  margin-right: 1em;
  object-fit: none;
}

#object-position-1 {
  object-position: 10px;
}

#object-position-2 {
  object-position: 100% 10%;
}

Gambar pertama diposisikan dengan inset tepi kirinya 10 piksel dari tepi kiri kotak elemen. Gambar kedua diposisikan dengan tepi kanan rata dengan tepi kanan kotak elemen dan terletak 10% dari ketinggian kotak elemen

Bagaimana cara mengubah perataan gambar dalam HTML?

Kami menggunakan untuk menyelaraskan gambar. Ini adalah elemen sebaris. Nilai Atribut. kiri. Ini digunakan untuk menyelaraskan gambar ke kiri.

Bagaimana cara memindahkan gambar ke kiri dalam HTML?

Gunakan kode HTML berikut untuk meratakan gambar ke kiri. .

Bagaimana cara memindahkan posisi gambar di CSS?

Posisi gambar di CSS dapat diubah dengan menggunakan properti CSS seperti properti object-position dan float property . Properti posisi-objek digunakan untuk menyelaraskan posisi sehubungan dengan koordinat x,y dari gambar di dalam wadahnya.

Bagaimana cara mengubah posisi gambar di JavaScript?

Kita dapat menetapkan koordinat untuk memosisikan gambar dengan mengubah gayanya. kiri dan gaya. nilai properti teratas di JavaScript. Kami dapat terus mengubah nilai-nilai ini untuk memindahkan gambar ke lokasi yang berbeda.

kode html