מרכוז תמונה ללא מתיחה (ושמירה על איכות)

חיפוש באתר
לשאלות ותשובות ברוכים הבאים לאתר wpHeb. אתר תמיכה ומדריכים למערכת וורדפרס. באתר תוכלו למצוא מדריכים וטיפים טובים לשימוש במערכת וורדפרס וכמובן הורדות לפלאגינים ותבניות. עם זאת, קיימת באתר מערכת שאלות ותשובות להתייעצויות ותמיכה במערכת.
פוסטים מומלצים
קישורים מומלצים
מרכוז תמונה ללא מתיחה (ושמירה על איכות)
11 אוגוסט, 2016

בעיקרון, מה שאנחנו הולכים לעשות במדריך הזה זה דבר מאוד פשוט באמצעות CSS. להציג את התמונה שלכם כדי שמה שלא יכול להיכנס לגודל הרצוי פשוט יצא החוצה ולא יראו אותו. כמו בתמונה הזאת.
cropped-thumbnails

נגיד ויש לכם אלמנט שבתוכו תמונה.

<div class="thumbnail">
  <img src="landscape-img.jpg" alt="Image" />
</div>

אז זה ה-CSS שלכם

.thumbnail {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.thumbnail img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  min-width: 100%;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}

קרדיט ל-jonathannicol