Yeniden boyutlandırma - CSS Hileleri

resizeMülkiyet kontrolleri ve nasıl bir eleman tıklayıp elemanın sağ alt köşesine sürükleyerek kullanıcı tarafından yeniden boyutlandırılabilir.

.module ( resize: both; )

Bilmesi çok önemli: özellik, çoğu öğe için başlangıç değeri olan dışında başka bir şeye ayarlanmadıkça resizehiçbir şey yapmaz .overflowvisible

Ayrıca Firefox'un bir öğeyi orijinal boyutundan daha küçük boyutlandırmanıza izin vereceğini bilmeye değer. Webkit tarayıcıları, bir öğeyi küçültmek için yeniden boyutlandırmanıza izin vermez, yalnızca daha büyük yapar (her iki boyutta da).

Değerler

none: öğe yeniden boyutlandırılamaz. Bu, çoğu öğe için başlangıç değeridir. textareaEleman en yaygın istisna-birçok tarayıcılarda varsayılan resizedeğerdir both.
both: kullanıcı, öğenin yüksekliğini ve / veya genişliğini yeniden boyutlandırabilir.
horizontal: kullanıcı, öğeyi yatay olarak yeniden boyutlandırabilir (genişliği artırarak).
vertical: kullanıcı, öğeyi dikey olarak yeniden boyutlandırabilir (yüksekliği artırarak).
inherit: öğe, üst öğesinin yeniden boyutlandırma değerini devralır.

Bir öğe yeniden boyutlandırıldığında, alt köşesinde küçük bir UI tutamacı vardır. Tutamaç, sayfa öğesi (soldan sağa) directionolarak ayarlandığında sayfa öğelerinde ltrsağda ve rtl(sağdan sola) sayfalarda solda görünür .

Sapsız (ön) ve tutamaklı (arka) bir eleman

Demo

Bu demodaki yeniden boyutlandırılabilir öğe bir paragraftır. Farklı resizedeğerleri denemek için düğmelere tıklayın .

CodePen'de CSS-Tricks (@ css-tricks) tarafından hazırlanan Kalem Yeniden Boyutlandırma Demosuna bakın.

İlişkili

overflow
direction

Daha fazla bilgi

Teknik Özellikler
Mozilla Belgeleri
David Walsh'ın makalesi
Textarea Püf Noktaları

Tarayıcı Desteği

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.