Nasıl resim boyutlandırma olmadan, belirli bir alanda bir görüntü merkezi mi?

9 Cevap php

Ben HTML kullanıyorum ... yeniden boyutlandırma olmadan, bir bölgede bir görüntüyü ortalamak istiyorum.

Örnek:

Ben bir resim var - Görüntü aslında 64x64 olduğunu. Mükemmel görüntüler.

Şimdi, ben başka bir görüntü var Ancak, görüntü onun 32x32, olması gerektiği kadar büyük değil - burada ne oluyor o 64x64 için yeniden boyutlandırır ve $% ^ & gibi bakmak yapar.

Nasıl herhangi bir ne kadar hiç yeniden boyutlandırma olmadan 'img' alanında merkezli istenilen genişlikte ve yükseklikte sonra görüntüleri küçük yapabilirim?

9 Cevap

Nelere ihtiyacınız var böyle bir şey olur:

<div class="box">
    <img src="whatever size image you'd like" />
</div>

Ve stil için (harici stil sayfasında, natch) uygulamak istiyorum:

/* Image centering */
div.box {
	border: 1px black solid;
    height: 64px;
    width: 64px;
    background: #444;
	display: table-cell;
	vertical-align: middle;
}
.box img {
	display:block;
	margin: 0px auto;
}

Bu boyutlar <= 64x64px görüntüler için çalışır ve büyük resimler ile çalışmak için kolayca değiştirilebilir olduğunu. Burada önemli unsurlardır

  • div set boyutları
  • Bir tablo hücresine olarak ekran (Dikey hizalama sağlar)
  • Dikey hizalama (Y-ekseni üzerinde hizalanırken dışarı w / tuhaf kesmek)
  • Ekran: img elemanının blok
  • margin: auto yanal görüntüyü merkezleri

Olmadan çözüm IE-düşmanca display:table-cell:

<!DOCTYPE html>
<style>
div {
  line-height:64px; /* that's the secret sauce */
  text-align:center;
  width:64px; height:64px;
}
img {vertical-align:middle}
</style>
<div><img …></div>

Sen 64x64 ve görüntü boyutlarını belirterek olmayan bir DIV içindeki görüntüyü koyarak deneyebilirsiniz. Sonra onun içeriği merkezli böylece div stil verebilir ve herhangi bir taşma gizli.

Dinamik getimagesize() php fonksiyonunu kullanarak bir görüntü boyutu elde edebilirsiniz:

<?php
  $size = getimagesize('imgX.png');
  $height = $size[1];
  $width = $size[0];
?>
<div style="text-align: center">
  <img src="imgX.png" width="<?php print($width) ?>" height="<?php print($height) ?>" />
</div>

Ben 36x36 görüntüleri ile benzer bir şey yapmak zorunda kalmıştım. Kullanıcılar herhangi bir boyutunu yüklemek başardık ama minik merkezini 36 kare piksel göstermek için sadece vardı.

Markup:

<li><div><span></span>
    <img src="_media/objects/jessica-bowman.png" alt="Jessica Bowman" /></div>
    <p><a href="#">Jessica Bowman</a></p>
</li>

Açıklıklı görüntü üzerinde yuvarlak köşeler elde etmek için, mutlaka gerekli değil sadece orada oldu.

CSS:

ul.recent-list li div {
    position: relative;
    float: left;
    width: 36px;
    height: 36px;
    overflow: hidden;
}

ul.recent-list li div span {
    position: relative;
    z-index: 100;
    display: block;
    width: 36px;
    height: 36px;
    background: url("../_media/icons/icon-overlay.png") top left no-repeat;
}

ul.recent-list li div img {
    position: relative;
    top: -36px;
    z-index: 0;
    float: left;
}

JavaScript:

$(window).load(function() {
$("ul.recent-list div img").each(function() {
	var moveX = ($(this).width() / 2 * -1) + 18;
	var moveY = ($(this).height() / 2) * -1 - 18; // 18 is 1/2 the default offset of 36px defined in CSS
	$(this).css({'top' : moveY, 'left' : moveX});
});
});

Ben bir kez kullanılan bir çözüm: hücre sincle, tek bir satır ile bir tablo ekleyin. , Bu 64 genişlik ve yükseklik bulunuyor Set sınır, hiçbir boşluk, hiçbir doldurma set ve merkezi uyum ve valign olun. Bu tablonun hücreye resim koymak.

Çözelti CSS + HMTL basit biraz

<img src="transparentpixel.gif" 
width="64" 
height="64" 
style="
	background-image:url('path/to/image.jpg');
	background-repeat:no-repeat;
	background-position:center center;
" />

transparentpixel.gif basit 1x1px şeffaf gif görüntü

Genişlik ve yükseklik ile bir img etiketi "germek veya ne olursa olsun gerçek boyutu bu boyutuna küçültmek" diyor bağlıyor. gibi bir şey kullanabilirsiniz:

<div style="text-align:center;">
	<img src="x.jpg">
</div>

ve hiçbir text-align işe neden bilmiyorum, ama benim deneyim için görünür.

Arka plan kullanarak görüntüyü işlemek için CSS kullanın:

<div style="background: url(img1.png) no-repeat center center; height: 64px; width: 64px;"></div>

Bu ölçekleme olmadan merkezinde görüntüyü gösterecektir.

etiketler