CSS yeniden boyutlandırma Özellik
Örnek
Burada kullanıcı bir <div> öğesinin hem yüksekliğini hem de genişliğini yeniden boyutlandırabilir:
div {
resize: both;
overflow: auto;
}
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
Özellik resize
, bir öğenin kullanıcı tarafından yeniden boyutlandırılıp boyutlandırılamayacağını (ve nasıl) tanımlar.
Not: Bu resize
özellik, satır içi öğelere veya overflow="visible" olan öğeleri bloke etmek için geçerli değildir. Bu nedenle, taşmanın "kaydır", "otomatik" veya "gizli" olarak ayarlandığından emin olun.
Varsayılan değer: | Yok |
---|---|
Miras: | Hayır |
canlandırılabilir: | Hayır. Canlandırılabilir hakkında bilgi edinin |
Sürüm: | CSS3 |
JavaScript sözdizimi: | nesne .style.resize="her ikisi de" |
Tarayıcı Desteği
Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
-moz- tarafından takip edilen sayılar, bir önekle çalışan ilk sürümü belirtir.
Property | |||||
---|---|---|---|---|---|
resize | 4.0 | 79.0 | 5.0 4.0 -moz- |
4.0 | 15.0 |
CSS Sözdizimi
resize: none|both|horizontal|vertical|initial|inherit;
Mülk değerleri
Value | Description | Play it |
---|---|---|
none | Default value. The user cannot resize the element | |
both | The user can resize both the height and width of the element | |
horizontal | The user can resize the width of the element | |
vertical | The user can resize the height of the element | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Daha fazla örnek
Örnek
Kullanıcının yalnızca bir <div> öğesinin yüksekliğini yeniden boyutlandırmasına izin verin:
div
{
resize: vertical;
overflow: auto;
}
Örnek
Kullanıcının yalnızca bir <div> öğesinin genişliğini yeniden boyutlandırmasına izin verin:
div
{
resize: horizontal;
overflow: auto;
}
Örnek
Birçok tarayıcıda, <textarea> varsayılan olarak yeniden boyutlandırılabilir. Burada, yeniden boyutlandırılabilirliği devre dışı bırakmak için yeniden boyutlandırma özelliğini kullandık:
textarea {
resize: none;
}
İlgili Sayfalar
CSS eğitimi: CSS Kullanıcı Arayüzü
HTML DOM referansı: özelliği yeniden boyutlandır