هنوز چند بایت مونده که پیدا کنم...

تبدیل تصاویر مستطیلی به دایره در دو حالت Landscape و Portrait

عکس هایی که مربعی هستن رو خیلی راحت میشه با اضافه کردن border-radius:50% دایره ایشون کرد. ولی عکس های که مستطیلی هستن فرق داره که فلسفه خودشو هم داره، که به طور خلاصه، برای دایره ای کردن می تونیم یه قسمت از تصویر مستطیلی رو کات یا به اصلاح کراپ کنیم.

تویه کد پایین دو نمونه کراپ کردن تصاویر تویه دو حالت مستطیلی به صورت افقی (landscape) و عمودی (portrait) رو میبینین.

// 1. ......................................................................
// landscape-oriented images
// تصاویری که به صورت افقی مستطیل هستن

// html
// اینو بنویسین تویه صفحه اچ تی ام ال
<div class="circular-landscape">
  <img src="images/rectangle.jpg" />
</div>

// css
// بعد این استایلو بهش اضافه کنین
.circular-landscape {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 50%;
}

.circular-landscape img {
  width: auto;
  height: 100%;
  margin-left: -50px;
}


// 2. ......................................................................
// portrait-oriented images
// تصاویری که به صورت عمودی مستطیل هستن

// html
// اینو بنویسین تویه صفحه اچ تی ام ال
<div class="circular-portrait">
  <img src="images/rectangle.jpg" />
</div>

// css
// بعد این استایلو بهش اضافه کنین
.circular-portrait {
  position: relative;
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 50%;
}

.circular-portrait img {
  width: 100%;
  height: auto;
}

نویسنده : فاطمه حسین پور
آدینه 9 تير 1396
+ 51 -

خوشحال میشیم نظرتُ بدونیم