CSS ﯽﺷ ﺖﯿﻌﻗﻮﻣ ﯽﮔﮋﯾﻭ

فهرست مطالب

code class="w3-codespan">object-position CSS> ﯽﮔﮋﯾﻭ

ﺮﯾﻮﺼﺗ

:ﺖﺳﺍ ﻞﺴﮑﯿﭘ 400x300 ﻪﮐ ﺪﯿﻨﮐ ﻩﺎﮕﻧ ﺲﯾﺭﺎﭘ ﺯﺍ ﺮﯾﺯ ﺮﯾﻮﺼﺗ ﻪﺑ

ﻢﯿﻨﮐ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ CSS ﯽﮔﮋﯾﻭ ﺯﺍ ﺪﻌﺑ ﻪﻠﺣﺮﻣ ﺭﺩ

object-fit: cover;

:ﺩﻮﺷ ﯽﻣ ﻩﺪﯾﺮﺑ ﺮﯾﺯ ﻞﮑﺷ ﻪﺑ ﺮﯾﻮﺼﺗ ،ﻝﺎﺣ ﻦﯾﺍ ﺎﺑ .ﻩﺪﺷ ﻩﺩﺍﺩ ﺪﻌﺑ ﻥﺩﺮﮐ ﺮﭘ ﻭ ﺩﺎﻌﺑﺍ ﺖﺒﺴﻧ

ﻝﺎﺜﻣ

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>

ﺖﯿﻌﻗﻮﻣ ﯽﺷ ﯽﮔﮋﯾﻭ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ

.ﻢﯿﻨﮐ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ object-position ﯽﮔﮋﯾﻭ ﺯﺍ ،ﺮﯾ

:ﺩﺮﯿﮔ ﺭﺍﺮﻗ ﺰﮐﺮﻣ ﺭﺩ ﮒﺭﺰﺑ ﯽﻤﯾﺪﻗ ﻥﺎﻤﺘﺧﺎﺳ ﻪﮐ ﻢﯿﻫﺩ ﺭﺍﺮﻗ ﯼﺭﻮﻃ ﺍﺭ ﺮﯾﻮﺼﺗ ﺎﺗ ﻢﯿﻨﮐ ﯽﻣ ﻩﺩ

ﻝﺎﺜﻣ

img {
  width: 200px;
  height: 
  300px;
  object-fit: cover;
  object-position: 80% 100%;
}

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

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

<h2>Using object-position</h2>

<p>Here we will use the object-position property to position the image so that the great old building is in center:</p>

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

</body>
</html>

:ﺩﺮﯿﮔ ﺭﺍﺮﻗ ﺰﮐﺮﻣ ﺭﺩ ﻞﻔﯾﺍ ﻑﻭﺮﻌﻣ ﺝﺮﺑ ﻪﮐ ﻢﯿﻫﺩ ﺭﺍﺮﻗ ﯼﺭﻮﻃ ﺍﺭ ﺮﯾﻮﺼﺗ ﺎﺗ ﻢﯿﻨﮐ ﯽﻣ ﻩﺩﺎﻔﺘﺳ

ﻝﺎﺜﻣ

img {
  width: 200px;
  height: 
  300px;
  object-fit: cover;
  object-position: 15% 100%;
}

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

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

<h2>Using object-position</h2>

<p>Here we will use the object-position property to position the image so that the famous Eiffel Tower is in center:</p>

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

</body>
</html>

CSS Object-* Properties

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

object-fit: ﺪﺷﺎﺑ ﻪﺘﺷﺍﺩ ﺖﻘﺑﺎﻄﻣ ﻥﺁ ﻑﺮﻇ ﺎﺑ ﺎﺗ ﺩﻮﺷ ﻩﺩﺍﺩ ﻩﺯﺍﺪﻧﺍ ﺮﯿﯿﻐﺗ ﺪﯾﺎﺑ <video> ﺎﯾ <img> ﮏﯾ
object-position: ﺪﻨﮐﯽﻣ ﺺﺨﺸﻣ x/y ﺎﺑ ﺍﺭ <video> ﺎﯾ <img> ﯼﺮﯿﮔﺭﺍﺮﻗ ﻩﻮﺤﻧ