Otomatik olarak resimleri yeniden boyutlandırmak için yeniden boyutlandırın ancak uzatmayın

Question

Ekran boyutuna göre bir resmi yeniden boyutlandırmak istiyorum ancak ekran çok büyük olduğunda bu görüntünün işlem piksellerini aşmasını istemiyorum. Şimdiye kadar bu istediğim oranlarını korur ama Ekran çok büyük olduğunda da uzat bu

<div align="center" style="position:static; height: 100%; width: 100%; top:0;left 0;"> 
<img src="myImg.png" style="width: 80%"> 
</div> 

yapmayı başardı. Bunu istemiyorum.

Answer 1

duyarlı bir görüntü için Css olup. Ancak, width: 100%; kullanmak, görüntünün gerçek boyutuna bakılmaksızın görüntünün kabı kadar geniş olmasını zorlar.

Birkaç diğer notlar:

• align="center" kullanımdan kaldırıldı. İçeriği hizalamak için css kullanmalısınız, yani text-align: center;.
• position: static;'u kullanmak, position özelliği için varsayılan değer olduğundan gereksizdir. Bunu kullanmanız gerektiğini düşünebildiğim tek zaman, başka bir css'yi geçersiz kılmanız gerekiyor.
• Eğer div'unuzu mutlak konumlandırdığınız sürece (ki siz değilseniz), o zaman top: 0; left: 0; hiçbir şey yapmayacaktır. Kodunuzun kalanını görmeden

, bu başarmak için çalışıyoruz ne için en iyi çözüm olacağını düşünüyorum:

<div style="text-align: center;"> 
     <img src="myImg.png" style="max-width: 100%; height: auto;" alt="FYI, image alt text is required" /> 
    </div> 

Answer 2

Ayrıca max-width özniteliği ayarlarsanız, görüntünün ne kadar genişleyebileceğini sınırlar. şöyle:

<div align="center" style="position:static; height: 100%; width: 100%; top:0;left 0;"> 
    <img src="myImg.png" style="width: 80%; max-width: 300px;"> 
</div> 

Bunu görüntünün gerçek genişliğini aşmaması sürece, bu max-width istediğiniz herhangi bir boyut yapabilirsiniz. Yüksekliği ile de mümkündür.

max-width: 100%; 
    height: auto; 

Bu resmin doğal genişliği aşmadan görünümü ile, kabın boyutu ile aşağı ölçekte yapacak aşağıdaki gibidir:

Answer 3

class="img-thumbnail" 

çözüm olabilir.