CSS ﺐﺳﺎﻨﻣ ﯽﺷ ﯽﮔﮋﯾﻭ

فهرست مطالب

    نمایش فهرست مطالب

ﻩﻮﺤﻧ ﻦﯿﯿﻌﺗ ﯼﺍﺮﺑ object-fitﯽﮔﮋﯾﻭ

CSS ﺐﺳﺎﻨﻣ ﯽﺷ ﯽﮔﮋﯾﻭ

ﺩﻮﺷ ﻩﺩﺎﻔﺘﺳﺍ ﺪﯾﺎﺑ <video> ﺎﯾ <img> ﮏﯾ ﻪﻧﻮﮕﭼ ﻪﮑﻨﯾﺍ ﻦﯿﯿﻌﺗ ﯼﺍﺮﺑ ﺪﻨﻧﺎﻣ .ﺪﻨﮐ ﺮﭘ ﻒﻠﺘﺨﻣ ﻕﺮﻃ ﻪﺑ ﺍﺭ ﻑﺮﻇ ﻪﮐ ﺪﯾﻮﮔ ﯽﻣ ﺍﻮﺘﺤﻣ ﻪﺑ ﯽﮔﮋﯾﻭ ﻦﯾﺍ

:ﺩﺭﺍﺩ ﻉﺎﻔﺗﺭﺍ ﻞﺴﮑﯿﭘ 300 ﻭ ﺽﺮﻋ ﻞﺴﮑﯿﭘ 400 ﺮﯾﻮﺼﺗ ﻦﯾﺍ .ﺪﯿﻨﮐ ﻩﺎﮕﻧ ﺲﯾﺭﺎﭘ ﺯﺍ ﺮﯾﺯ ﺮﯾﻮﺼﺗ

Paris

:ﺩﻮﺑ ﺪﻫﺍﻮﺧ ﺮﯾﺯ ﻞﮑﺷ ﻪﺑ ،ﻢﯿﻨﮐ (ﻞﺴﮑﯿﭘ 300) ﻉﺎﻔﺗﺭﺍ ﻥﺎﻤﻫ ﻭ (ﻞﺴﮑﯿﭘ 200) ﻥﺁ ﺽﺮﻋ ﻒﺼﻧ ﺍ

Paris

ﻝﺎﺜﻣ

img {
  width: 200px;
  height: 
  300px;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

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

<h2>Image</h2>
<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

.ﺩﺮﯿﮔ ﺭﺍﺮﻗ ﻞﺴﮑﯿﭘ 200x300 ﻑﺮﻇ ﺭﺩ ﺎﺗ ﺖﺳﺍ ﻥﺪﺷ ﻩﺩﺮﺸﻓ ﻝﺎﺣ ﺭﺩ ﺮﯾﻮﺼﺗ ﻪﮐ ﻢﯿﻨﯿﺑ ﯽﻣ

ﺪﯾﺁ ﯽﻣ object-fit ﯽﮔﮋﯾﻭ ﻪﮐ ﺖﺳﺍ ﯽﯾﺎﺟ ﺎﺠﻨﯾﺍ

  • ﺮﭘ - ﺶﯿﭘ ﻦﯾﺍﺩﻮﺷ ﺮﭘ ﺎﺗ ﺪﻨﮐ ﯽﻣ ﺮﯿﯿﻐﺗ ﺮﯾﻮﺼﺗ

  • ﯼﻭﺎﺣ - ﺮﯾﻮﺼﺗ

  • ﺪﻠﺟ - ﺪﻨﮐ ﯽﻣ ﻆﻔﺣ ﺍﺭ ﺩﻮﺧ ﺩﺎﻌﺑﺍ ﺖﺒﺴﻧ ﺮﯾﻮﺼﺗ

  • ﭻﯿﻫ - ﺖﺳﺍ ﻩﺩﺮﮑﻧ ﺮﯿﯿﻐﺗ ﺮﯾﻮﺼﺗ ﻩﺯﺍﺪﻧﺍ

  • ﺱﺎﯿﻘﻣ ﺶﻫﺎﮐ - ﺖﺳﺍ ﺮﯾﻮﺼﺗ

.ﺶﺷﻮﭘ :ﺖﯿﻓ ءﯽﺷ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ

.ﺪﻨﮐ ﯽﻣ ﻆﻔﺣ ﺍﺭ ﺩﻮﺧ ﺩﺎﻌﺑﺍ ﺖﺒﺴﻧ ﺮﯾﻮﺼﺗ ،ﻢﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ob

Paris

ﻝﺎﺜﻣ

img {
  width: 200px;
  height: 
  300px;
  object-fit: cover;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

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

<h2>Using object-fit: cover</h2>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

;contain :ﺖﯿﻓ ءﯽﺷ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ

:ﺪﻨﮐﯽﻣ ﺮﯿﯿﻐﺗ ﻩﺪﺷ ﻩﺩﺍﺩ ﺪﻌﺑ ﺭﺩ ﻦﺘﻓﺮﮔ ﺭﺍﺮﻗ ﯼﺍﺮﺑ ﻥﺁ ﻩﺯﺍﺪﻧﺍ ﺎﻣﺍ ،ﺪﻨﮐﯽﻣ ﻆﻔ

Paris

ﻝﺎﺜﻣ

img {
  width: 200px;
  height: 
  300px;
  object-fit: contain;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

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

<h2>Using object-fit: contain</h2>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

;fill :ﺖﯿﻓ ءﯽﺷ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ

:ﺩﻮﺷ ﺐﺳﺎﻨﻣ ﺎﺗ ﺩﻮﺷ ﯽﻣ ﻩﺩﺮﺸﻓ ﺎﯾ ﻩﺪﯿﺸﮐ ﺮﯾﻮﺼﺗ ،ﻡﻭﺰﻟ ﺕﺭﻮﺻ ﺭﺩ .ﺪﻨﮐ ﯽﻣ ﺮﯿﯿﻐﺗ ﻩﺪﺷ ﻩﺩﺍﺩ

Paris

ﻝﺎﺜﻣ

img {
  width: 200px;
  height: 
  300px;
  object-fit: fill;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

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

<h2>Using object-fit: fill</h2>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

.ﭻﯿﻫ :ﺖﯿﻓ ءﯽﺷ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ

:ﺪﻨﮐ ﯽﻤﻧ ﺮﯿﯿﻐﺗ ﺮﯾﻮﺼﺗ ﻩﺯﺍﺪﻧﺍ ﻢﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ object-fit:

Paris

ﻝﺎﺜﻣ

img {
  width: 200px;
  height: 
  300px;
  object-fit: none;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

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

<h2>Using object-fit: none</h2>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

.ﺱﺎﯿﻘﻣ ﺶﻫﺎﮐ :ﺐﺳﺎﻨﻣ ءﯽﺷ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ

<"code class="w3-codespan> ﺎﯾ .ﺩﻮﺷ ﯽﻣ ﮏﭼﻮﮐ ﭻﯿﻫ<"code class="w3-codespan

Paris

ﻝﺎﺜﻣ

img {
  width: 200px;
  height: 
  300px;
  object-fit: scale-down;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

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

<h2>Using object-fit: scale-down</h2>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

ﺮﮕﯾﺩ ﯽﻟﺎﺜﻣ

.ﺪﻨﻨﮐ ﺮﭘ ﺍﺭ ﻉﺎﻔﺗﺭﺍ ﺪﺻﺭﺩ 100 ﻭ ﺮﮔﺭﻭﺮﻣ ﻩﺮﺠﻨﭘ ﺪﺻﺭﺩ 50 ﺽﺮﻋ ﻢﯿﻫﺍﻮﺧ ﯽﻣ ﻭ ﻢﯾﺭﺍﺩ ﺮﯾﻮﺼﺗ

:ﺩﻭﺭ ﯽﻣ ﻦﯿﺑ ﺯﺍ ﺮﯾﻭﺎﺼﺗ ﺩﺎﻌﺑﺍ ﺖﺒﺴﻧ ،ﻢﯿﻫﺩ ﯽﻣ ﺮﯿﯿﻐﺗ ﺍﺭ ﺮﮔﺭﻭﺮﻣ ﻩﺮﺠﻨﭘ ﻩﺯﺍﺪﻧﺍ ﯽﺘﻗﻭ ﻦﯾ

ﻝﺎﺜﻣ

Norway Paris

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!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="rock600x400.jpg" alt="Norway" style="float:left;width:50%;height:100%;">
  <img src="paris.jpg" alt="Paris" style="float:left;width:50%;height:100%;">
</div>

</body>
</html>

:ﺩﻮﺷﯽﻣ ﻆﻔﺣ ﺮﯾﻭﺎﺼﺗ ﺩﺎﻌﺑﺍ ﺖﺒﺴﻧ ،ﻢﯿﻫﺩﯽﻣ ﺮﯿﯿﻐﺗ ﺍﺭ ﺮﮔﺭﻭﺮﻣ ﻩﺮﺠﻨﭘ ﻩﺯﺍﺪﻧﺍ ﯽﺘ

ﻝﺎﺜﻣ

Norway Paris

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!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="rock600x400.jpg" alt="Norway" style="float:left;width:50%;height:100%;object-fit:cover;">
  <img src="paris.jpg" alt="Paris" style="float:left;width:50%;height:100%;object-fit:cover;">
</div>

</body>
</html>

CSS object-fit ﺮﺘﺸﯿﺑ ﯼﺎﻫ ﻝﺎﺜﻣ

.ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ object-fit ﯽﮔﮋﯾﻭ ﻦﮑﻤﻣ ﺮﯾﺩﺎﻘﻣ

ﻝﺎﺜﻣ

.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!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="paris.jpg" alt="Paris" style="width:200px;height:300px">

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

<h2>object-fit: contain:</h2>
<img class="contain" src="paris.jpg" alt="Paris" style="width:200px;height:300px">

<h2>object-fit: cover:</h2>
<img class="cover" src="paris.jpg" alt="Paris" style="width:200px;height:300px">

<h2>object-fit: scale-down:</h2>
<img class="scale-down" src="paris.jpg" alt="Paris" style="width:200px;height:300px">

<h2>object-fit: none:</h2>
<img class="none" src="paris.jpg" alt="Paris" style="width:200px;height:300px">

</body>
</html>

CSS Object-* Properties

:ﺪﻨﮐ ﯽﻣ ﺖﺳﺮﻬﻓ ﺍﺭ *-CSS object ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﺮﯾﺯ ﻝﻭﺪﺟ

object-fit

ﺪﺷﺎﺑ ﻪﺘﺷﺍﺩ ﺖﻘﺑﺎﻄﻣ ﻥﺁ ﻑﺮﻇ ﺎﺑ ﺎﺗ ﺩﻮﺷ ﻩﺩﺍﺩ ﻩﺯﺍﺪﻧﺍ ﺮﯿﯿﻐﺗ ﺪﯾﺎﺑ <video> ﺎﯾ <img> ﮏﯾ

object-position

ﺪﻨﮐﯽﻣ ﺺﺨﺸﻣ x/y ﺎﺑ ﺍﺭ <video> ﺎﯾ <img> ﯼﺮﯿﮔﺭﺍﺮﻗ ﻩﻮﺤﻧ