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
374636


HTML
374637


SONUÇ:
374638


😀😀😀😅 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.
 
grafikibrahim24 dedi:
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 🙁


CSS Eki Görüntüle 374636

HTMLEki Görüntüle 374637

SONUÇ: Eki Görüntüle 374638

😀😀😀😅 Sadece width ya da sadece height ile olacak iş değil. Resmin kutuya ölçekli bir şekilde tam sığdırmam lazım hem width hem height ölçekli uyarlamasını istiyorum.
Genişletmek için tıkla...

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.
Nayeon dedi:
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.
Genişletmek için tıkla...
Bu 1 satır için. Başka satır eklemek istiyorsan bir tane daha div açıp class row demen lazım.
 
Nayeon dedi:
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.
Genişletmek için tıkla...


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.

374641

Nayeon dedi:
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.
Genişletmek için tıkla...





Ben bunu istiyorum

374642
 
grafikibrahim24 dedi:
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.

Eki Görüntüle 374641






Ben bunu istiyorum

Eki Görüntüle 374642
Genişletmek için tıkla...

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=
374688


CSS=
374689

SONUÇ=
374690


Çok ilginç şeyler oldu ya benim devreler yandı iyice 😟
 
Son düzenleme:
Uyarı! Bu konu 6 yıl önce açıldı.
Muhtemelen daha fazla tartışma gerekli değildir ki bu durumda yeni bir konu başlatmayı öneririz. Eğer yine de cevabınızın gerekli olduğunu düşünüyorsanız buna rağmen cevap verebilirsiniz.

Benzer konular

grafikibrahim24
img src ile resmi kutunun içerisine otomatik sığdırma
Mesaj
4
Görüntüleme
3B
grafikibrahim24
grafikibrahim24
bysekowest
Web tasarım öğrenme
Mesaj
5
Görüntüleme
3B
Helelehololo
H
alperacarli
Özel web tasarım neden yaptırmalıyız?
Mesaj
1
Görüntüleme
656
Ludvig
Ludvig
ARI
  • Çözüldü
Web Tasarım maliyeti ne kadar olmalı?
Mesaj
8
Görüntüleme
1B
dincer degre
dincer degre
Sncroow
Web tasarım ödevi
Mesaj
4
Görüntüleme
464
dgknbzglu
dgknbzglu

Yeni konular

Yeni mesajlar

Geri
Yukarı