Web tasarım, img src boyutlandırması

CSS: 
.portfolyoresim {
background-color: #FFFFFF;
float: left;
height: 155px;
width: 155px;
margin-left: 20px;
margin-top: 20px;
border: 2px solid #032541;
}

width: 155px; yerine width: 100%;
 
Nayeon dedi:
Hepsine aynı class ismini ver olsun bitsin.
Genişletmek için tıkla...

Anladım da sıkıntı şöyle. Mesela A5 broşür dikey bir resim, kartvizit ise yatay bir resim.
Farklı ölçeklerde resimler de var yani tek bir resmin ölçeğine göre ayarlarsam
diğerleri yamuk olur
Czarintax dedi:
CSS: 
.portfolyoresim {
background-color: #FFFFFF;
float: left;
height: 155px;
width: 155px;
margin-left: 20px;
margin-top: 20px;
border: 2px solid #032541;
}

width: 155px; yerine width: 100%;
Genişletmek için tıkla...

CSS

HTML

SONUÇ:

Sadece width ya da sadece height ile olacak iş değil. Resmi kutuya ölçekli bir şekilde tam sığdırmam lazım hem width hem height ölçekli uyarlamasını istiyorum.
 

Hocam siz kutu oluşturmamışsınız ki. Buradan column oluşturun.
 
Nayeon dedi:
Hocam siz kutu oluşturmamışsınız ki. Buradan column oluşturun.
Genişletmek için tıkla...
HTML: 
<div class="row">
    <div class="col-sm-2" style="background-color:lavender;"><a href="D:\Web Sayfam\images\Portfolyo\1461_cadde_oto_a5brosur.png" target="_blank">
<img src="D:\Web Sayfam\images\Portfolyo\1461_cadde_oto_a5brosur.png" alt="D:\Web Sayfam\images\Portfolyo\1461_cadde_oto_a5brosur.png" title="Tam boyutta görmek için tıklayınız." height="100%" width="100%"></a></div>
    <div class="col-sm-2" style="background-color:lavenderblush;"><a href="D:\Web Sayfam\images\Portfolyo\1461_cadde_oto_a5brosur.png" target="_blank">
<img src="D:\Web Sayfam\images\Portfolyo\1461_cadde_oto_a5brosur.png" alt="D:\Web Sayfam\images\Portfolyo\1461_cadde_oto_a5brosur.png" title="Tam boyutta görmek için tıklayınız." height="100%" width="100%"></a></div>
    <div class="col-sm-2" style="background-color:lavender;"><a href="D:\Web Sayfam\images\Portfolyo\1461_cadde_oto_a5brosur.png" target="_blank">
<img src="D:\Web Sayfam\images\Portfolyo\1461_cadde_oto_a5brosur.png" alt="D:\Web Sayfam\images\Portfolyo\1461_cadde_oto_a5brosur.png" title="Tam boyutta görmek için tıklayınız." height="100%" width="100%"></a></div>
    <div class="col-sm-2" style="background-color:lavender;"><a href="D:\Web Sayfam\images\Portfolyo\1461_cadde_oto_a5brosur.png" target="_blank">
<img src="D:\Web Sayfam\images\Portfolyo\1461_cadde_oto_a5brosur.png" alt="D:\Web Sayfam\images\Portfolyo\1461_cadde_oto_a5brosur.png" title="Tam boyutta görmek için tıklayınız." height="100%" width="100%"></a></div>
    <div class="col-sm-2" style="background-color:lavenderblush;"><a href="D:\Web Sayfam\images\Portfolyo\1461_cadde_oto_a5brosur.png" target="_blank">
<img src="D:\Web Sayfam\images\Portfolyo\1461_cadde_oto_a5brosur.png" alt="D:\Web Sayfam\images\Portfolyo\1461_cadde_oto_a5brosur.png" title="Tam boyutta görmek için tıklayınız." height="100%" width="100%"></a></div>
    <div class="col-sm-2" style="background-color:lavender;">.<a href="D:\Web Sayfam\images\Portfolyo\1461_cadde_oto_a5brosur.png" target="_blank">
<img src="D:\Web Sayfam\images\Portfolyo\1461_cadde_oto_a5brosur.png" alt="D:\Web Sayfam\images\Portfolyo\1461_cadde_oto_a5brosur.png" title="Tam boyutta görmek için tıklayınız." height="100%" width="100%"></a></div>
  </div>

Bu da örnek.
Bu 1 satır için. Başka satır eklemek istiyorsan bir tane daha div açıp class row demen lazım.
 


Senin kodlarını kopyalayıp resim adını değiştirdim. Resim bozulmadan orijinal boyutta gözüküyor.
Ama şimdide sıkıntı şu: Resim kendi boyutuna göre istediği kadar büyük küçük oluyor. Bir dakikaya çizerek anlatacağım ne istediğimi.







Ben bunu istiyorum

 

CSS: 
.col-sm-2{
    width: 50px;
    height: 50px;
}

.portfolyoresim{
    width: 100%;
}

Bunları da ekler misiniz?
 
Nayeon dedi:
CSS: 
.col-sm-2{
    width: 50px;
    height: 50px;
}

.portfolyoresim{
    width: 100%;
}

Bunları da ekler misiniz?
Genişletmek için tıkla...


Evdekiler yattı bende bilgisayarı kapattım. Yarın bu kodları da ekleyip ne çıkıyor atarım. Teşekkürler.
Nayeon dedi:
CSS: 
.col-sm-2{
    width: 50px;
    height: 50px;
}

.portfolyoresim{
    width: 100%;
}

Bunları da ekler misiniz?
Genişletmek için tıkla...


HTML=


CSS=

SONUÇ=


Çok ilginç şeyler oldu ya benim devreler yandı iyice
 
Son düzenleme:
Konuyu cevapla
Menü
Giriş yap
Kaydol
Bu siteyi kullanmak için çerezler gereklidir. Siteyi kullanmaya devam etmek için çerezleri kabul etmelisiniz. Daha Fazlasını Öğren.…