خصوصیات Object-Fit و Resize و Outline-Offset

          برنامه نویس 
            بازدید : 31
          سه شنبه 25 تیر 1398
           نظرات (0)
        

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

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

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

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

تصویر پاریس

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

پاریس به صورت 200x400 پاریس به صورت 200×400

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

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPEhtml>
<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 استفاده کنیم، به جای آنکه تصویر فشرده شود گوشه های تصویر قطع می شود تا نسبت طول و عرض تصویر حفظ شود:

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPEhtml>
<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 استفاده نمی کنیم بنابراین سعی کنید پنجره ی مرورگرتان را کوچک کنید تا ببینید که نسبت طول و عرض تصویر کاملا بهم میریزد:

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!DOCTYPE html>
<html>
<body>
 
<h2>NotUsing object-fit</h2>
<p>Here we usedonotuse"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 بنویسید و پنجره ی مرورگر را کوچک کنید، میبینید که نسبت طول و عرض تصویر بهم نخواهد ریخت:

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!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 ispreserved:</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 مشخص شده اند.

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

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<!DOCTYPEhtml>
<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(thisisdefault):</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> داریم که به شما اجازه می دهد عرض اش (نه ارتفاع) را تغییر دهید:

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!DOCTYPEhtml>
<html>
<head>
<style>
div {
  border:2pxsolid;
  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 thisdiv element.</p>
  <p>Toresize:Click anddrag the bottom right corner of thisdiv element.</p>
</div>
 
<p><b>Note:</b>Internet Explorer does notsupport the resize property.</p>
 
</body>
</html>

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

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

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

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!DOCTYPEhtml>
<html>
<head>
<style>
div {
  border:2pxsolid;
  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 thisdiv element.</p>
  <p>Toresize:Click anddrag the bottom right corner of thisdiv element.</p>
</div>
 
<p><b>Note:</b>Internet Explorer does notsupport the resize property.</p>
 
</body>
</html>

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

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

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!DOCTYPEhtml>
<html>
<head>
<style>
div {
  border:2pxsolid;
  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 andthe width of thisdiv element.</p>
  <p>Toresize:Click anddrag the bottom right corner of thisdiv element.</p>
</div>
 
<p><b>Note:</b>Internet Explorer does notsupport the resize property.</p>
 
</body>
</html>

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

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

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<!DOCTYPEhtml>
<html>
<head>
<style>
textarea#test {
   resize:none;
}
</style>
</head>
<body>
 
<h1>The resize Property</h1>
 
<p>Inmany browsers,textarea elements are resizable by default.Inthisexample,we have used the resize propertytodisable the resizability:</p>
 
<textarea id="test">Textarea-Notresizable</textarea>
<br><br>
 
<textarea>Textarea-Resizable(default)</textarea>
 
<p><b>Note:</b>Internet Explorer does notsupport the resize property.</p>
 
</body>
</html>

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

`outline-offset`

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

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<!DOCTYPEhtml>
<html>
<head>
<style>
div.ex1 {
  margin:20px;
  border:1pxsolidblack;
  outline:4pxsolidred;
  outline-offset:15px;
}
 
div.ex2 {
  margin:10px;
  border:1pxsolidblack;
  outline:5pxdashedblue;
  outline-offset:5px;
}
</style>
</head>
<body>
<h1>The outline-offset Property</h1>
 
<div class="ex1">Thisdiv hasa4pixels solid red outline15pixels outside the border edge.</div>
<br>
 
<div class="ex2">Thisdiv hasa5pixels dashed blue outline5pixels outside the border edge.</div>
 
</body>
</html>

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

منبع: روکسو

ارسال نظر برای این مطلب