خصوصیات resize و outline-offset و object-fit در css

کار با خصوصیت object-fit در css

خصوصیت object-fit در css مشخص می کند که عناصر <img> و <video> چطور در هنگام نیاز تغییر اندازه دهند تا عنصر نگهدارنده شان را کاملا پُر کنند. جدول زیر پشتیبانی مرورگرهای مختلف را از این خصوصیت نشان می دهد:

حصوصیت	کروم	Edge	فایرفاکس	سافاری	اپرا
object-fit	31.0	16.0	36.0	7.1	19.0

در واقع خصوصیت object-fit به عنصر ما می گوید که چطور تغییر سایز دهد تا تمام فضای عنصر نگهدارنده اش را بگیرد؛ به طور مثال آیا نسبت طول و عرض را حفظ کند یا بدون توجه به این نسبت آنقدر کشیده شود که تمام فضا را پر کند؟

تصویر زیر توسط یک عکاس در پاریس گرفته شده و ابعاد 400x300 پیکسلی دارد:

تصویر پاریس

اما اگر این تصویر را با ابعاد 200x400 پیکسلی در صفحه ی خود قرار دهیم به این شکل در می آید:

به کد آن نگاه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width:200px;
  height:400px;
}
</style>
</head>
<body>

<h2>Image</h2>
<img src="https://www.w3schools.com/css/paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

مشاهده ی خروجی در JSBin

همانطور که می بینید این تصویر فشرده شده (بدون توجه به نسبت طول و عرض) تا تمام فضای 400 در 300 پیکسلی را پُر کند. اما اگر از ;object-fit: cover استفاده کنیم، به جای آنکه تصویر فشرده شود گوشه های تصویر قطع می شود تا نسبت طول و عرض تصویر حفظ شود:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width:200px;
  height:400px;
  object-fit:cover;
}
</style>
</head>
<body>

<h2>The object-fit Property</h2>
<img src="https://www.w3schools.com/css/paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

مشاهده ی خروجی در JSBin

مثالی دیگر

دو تصویر دیگر را در نظر بگیرید. می خواهیم دو تصویر را طوری کنار هم قرار دهیم که هر کدام 50 درصد از عرض صفحه و 100 درصد ارتفاع را بگیرند. در مثال زیر ابتدا از object-fit استفاده نمی کنیم بنابراین سعی کنید پنجره ی مرورگرتان را کوچک کنید تا ببینید که نسبت طول و عرض تصویر کاملا بهم میریزد:

<!DOCTYPE html>
<html>
<body>

<h2>Not Using object-fit</h2>
<p>Here we use do not use "object-fit", so when we resize the browser window, the aspect ratio of the images will be destroyed:</p>

<div style="width:100%;height:400px;">
  <img src="https://www.w3schools.com/css/rock600x400.jpg" alt="Norway" style="float:left;width:50%;height:100%;">
  <img src="https://www.w3schools.com/css/paris.jpg" alt="Paris" style="float:left;width:50%;height:100%;">
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

حالا اگر این کد را با object-fit: cover بنویسید و پنجره ی مرورگر را کوچک کنید، میبینید که نسبت طول و عرض تصویر بهم نخواهد ریخت:

<!DOCTYPE html>
<html>
<body>

<h2>Using object-fit</h2>
<p>Here we use "object-fit: cover;", so when we resize the browser window, the aspect ratio of the images is preserved:</p>

<div style="width:100%;height:400px;">
  <img src="https://www.w3schools.com/css/rock600x400.jpg" alt="Norway" style="float:left;width:50%;height:100%;object-fit:cover;">
  <img src="https://www.w3schools.com/css/paris.jpg" alt="Paris" style="float:left;width:50%;height:100%;object-fit:cover;">
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

خصوصیت object-fit در css می تواند مقادیر زیر را بپذرید:

fill : این مقدار پیش فرض است. این گزینه تحت هر شرایطی تصویر را به اندازه ی عنصر نگهدارنده اش در می‌آورد و به نسبت طول و عرض توجه نمی کند.
contain : این مقدار تصویر را آنقدر بزرگ یا کوچک می کند که درون عنصر نگهدارنده اش جا شود و در عین حال نسبت طول و عرض را نیز حفظ می کند.
cover : این مقدار تصویر را آنقدر بزرگ یا کوچک می کند که تمام فضای عنصر نگهدارنده اش را پُر کند و در عین حال نسبت طول عرض را نیز حفظ کند.
none : تصویر هیچ تغییری نمی کند.
scale-down : تصویر، یا به طور کلی محتوا، به صورتی تنظیم می شود که انگار none یا contain مشخص شده اند.

در مثال زیر تمام این مقادیر را تست کرده ایم تا تفاوتشان را به صورت عملی درک کنید:

<!DOCTYPE html>
<html>
<head>
<style>
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
</style>
</head>
<body>

<h1>The object-fit Property</h1>

<h2>No object-fit:</h2>
<img src="https://www.w3schools.com/css/paris.jpg" alt="Paris" style="width:200px;height:400px">

<h2>object-fit: fill (this is default):</h2>
<img class="fill" src="https://www.w3schools.com/css/paris.jpg" alt="Paris" style="width:200px;height:400px">

<h2>object-fit: contain:</h2>
<img class="contain" src="https://www.w3schools.com/css/paris.jpg" alt="Paris" style="width:200px;height:400px">

<h2>object-fit: cover:</h2>
<img class="cover" src="https://www.w3schools.com/css/paris.jpg" alt="Paris" style="width:200px;height:400px">

<h2>object-fit: scale-down:</h2>
<img class="scale-down" src="https://www.w3schools.com/css/paris.jpg" alt="Paris" style="width:200px;height:400px">

<h2>object-fit: none:</h2>
<img class="none" src="https://www.w3schools.com/css/paris.jpg" alt="Paris" style="width:200px;height:400px">

</body>
</html>

مشاهده ی خروجی در JSBin

خصوصیات resize و outline-offset

حالا به 2 خصوصیت دیگر در زبان CSS میرسیم:

resize
outline-offset

جدول زیر وضعیت پشتیبانی مرورگر های مختلف از این دو خصوصیت را نشان می دهد:

خصوصیت	کروم	edge	فایرفاکس	سافاری	اپرا
resize	4.0	15.0	5.0 4.0 -moz-	4.0	15.0
outline-offset	4.0	15.0	5.0 4.0 -moz-	4.0	9.5

ابتدا باید resize را بررسی کنیم.

`resize`

خصوصیت resize به مرورگر می گوید که آیا اندازه ی فلان عنصر به دست کاربر قابل تغییر باشد یا خیر. واضح است که Internet Explorer از این خصوصیت پشتیبانی نمی کند. در مثال زیر یک <div> داریم که به شما اجازه می دهد عرض اش (نه ارتفاع) را تغییر دهید:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  resize: horizontal;
  overflow: auto;
}
</style>
</head>
<body>

<h1>The resize Property</h1>

<div>
  <p>Let the user resize only the width of this div element.</p>
  <p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>

<p><b>Note:</b> Internet Explorer does not support the resize property.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

در قسمت پایین و راست این <div> خطی وجود دارد که با گرفتن و کشیدن آن می توانید اندازه اش را تغییر دهید.

در مثال بعدی همین <div> را آورده ایم که تنها به شما اجازه ی تغییر ارتفاع (و نه عرض و ارتفاع) را می دهد:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  resize: vertical;
  overflow: auto;
}
</style>
</head>
<body>

<h1>The resize Property</h1>

<div>
  <p>Let the user resize only the height of this div element.</p>
  <p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>

<p><b>Note:</b> Internet Explorer does not support the resize property.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

اما مثال زیر به شما اجازه ی تغییر عرض و ارتفاع را می دهد:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  resize: both;
  overflow: auto;
}
</style>
</head>
<body>

<h1>The resize Property</h1>

<div>
  <p>Let the user resize both the height and the width of this div element.</p>
  <p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>

<p><b>Note:</b> Internet Explorer does not support the resize property.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

در اکثر مرورگرهای اینترنتی اندازه ی عنصر <textarea> به طور پیش فرض قابل تغییر است بنابراین اگر خواستید اینطور نباشد باید از خصوصیت resize استفاده کنید:

<!DOCTYPE html>
<html>
<head>
<style> 
textarea#test {
   resize: none;
}
</style>
</head>
<body>

<h1>The resize Property</h1>

<p>In many browsers, textarea elements are resizable by default. In this example, we have used the resize property to disable the resizability:</p>

<textarea id="test">Textarea - Not resizable</textarea>
<br><br>

<textarea>Textarea - Resizable (default)</textarea>

<p><b>Note:</b> Internet Explorer does not support the resize property.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

`outline-offset`

خصوصیت outline-offset خطی بین حاشیه ی عنصر و outline آن می کشد. توجه داشته باشید که outline با حاشیه (border) تفاوت دارد. outline ها بیرون از حاشیه کشیده می شوند و ممکن است با محتوا و تگ های دیگر برخورد داشته باشند. از طرفی هم outline جزئی از ابعاد عنصر ما نیست؛ یعنی outline بر مجموع طول و عرض عنصر بی تاثیر است. مثال زیر outline-offset را به خوبی نشان می دهد:

<!DOCTYPE html>
<html>
<head>
<style> 
div.ex1 {
  margin: 20px;
  border: 1px solid black;
  outline: 4px solid red;
  outline-offset: 15px;
} 

div.ex2 {
  margin: 10px;
  border: 1px solid black;
  outline: 5px dashed blue;
  outline-offset: 5px;
} 
</style>
</head>
<body>
<h1>The outline-offset Property</h1>

<div class="ex1">This div has a 4 pixels solid red outline 15 pixels outside the border edge.</div>
<br>

<div class="ex2">This div has a 5 pixels dashed blue outline 5 pixels outside the border edge.</div>

</body>
</html>

مشاهده ی خروجی در JSBin