Web tasarım, img src boyutlandırması

grafikibrahim24

Decapat
Katılım
13 Ağustos 2018
Mesajlar
818
Çözümler
1
İnternette saatlerce aradım, videolar izledim ama bir türlü beceremedim.
Kendime bir portfolyo sitesi yapıyorum. Gördüğünüz küçük resimlerden 100-110 tane var. Gördüğünüz gibi resimlerin en-boy oranı yok, büzülmüşler ve ortalı değiller. Ben istiyorum ki: resimler en-boy oranını koruyarak karenin tam ortasına yerleşsin, ve mauseyi resmin üstüne getirdiğimde "Tam boyutta görmek için tıklayınız." yazısı çıksın. Yazıya tıklayınca resmi yeni pencerede büyük ölçekli olarak göstersin.
Sizden ricam: Bu istediğim özellik için gerekli kodu, tek bir resim karesi için yazar mısınız. Ben de onu kopyalayıp sadece resim adını değiştireyim. Hem işimi görmüş, hemde nasıl bir kod kullanıldığını öğrenmiş olayım. Şimdiden teşekkürler.
Not: Dreamweaver CC 2019 kullanıyorum.

 
Son düzenleyen: Moderatör:
Gerekli yerleri kendine göre değiştirerek ayarlayabilirsin.
HTML: 
<a href="resim.jpg" target="_blank"><img src="resim.jpg" alt="Resim Adı" title="Tam boyutta görmek için tıklayınız." height="100%" width="100%"></a>
Resimleri karenin içine tam sığdırmak için şuraya bakabilirsin;

Edit fiddle - JSFiddle - Code Playground

JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
jsfiddle.net
 
Son düzenleme:

Öncelikle çok teşekkür ederim. Tıklayıp tam boyuta geçme olayı tam istediğim gibi oldu fakat
küçük resim gördüğün gibi genişlemiş.
Dikey resimler yanlara doğru genişliyor, yatay resimler yukarı ve aşağı doğru genişliyor.
Bunun en/boyu dengeli bir şekilde küçülerek kutunun içine sığmasını istiyorum. Ne yapmalıyım?


 
Sayfanın tam kodunu atabilirseniz yardımcı olmaya çalışırım.
 
Czarintax dedi:
Sayfanın tam kodunu atabilirseniz yardımcı olmaya çalışırım.
Genişletmek için tıkla...



HTML KODLARIM
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Web Sayfam</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<style type="text/css">
.Header {
background-image: url(images/Header.png);
height: 486px;
width: 956px;
margin-right: auto;
margin-left: auto;
}
.portfolyoresim {
background-color: #FFFFFF;
float: left;
height: 150px;
width: 150px;
padding: 20px;

}
</style>
</head>
<body>



<div class="container">
<div class="header"> </div>
<div class="hakkimda">
<div class="hakkimdabaslik">Hakkımda</div>
<div class="hakkimdayazi">1998 doğumluyum, Erzincan’lıyım. İlköğretim ve liseyi tamamladıktan sonra
Nişantaşı Üniversitesi Grafik ve Tasarım Bölümü’ne başlamam ile grafikerlik
macerama ilk adımı atmış oldum. Yaklaşık 2 sene boyunca bir yandan eğitim
için okula giderken bir yandan da hem harçlığımı çıkarmak, hem de gerçek bir
tasarımcı olma yolunda kendimi geliştirebilmek için bir ajansta çırak olarak işe
başladım. Başlangıç olarak yalnızca kartvizit, sticker gibi küçük işler yaparak
risksiz bir şekilde işi öğrenmeye odaklandım. İlerleyen zamanda çırak olmaktan
çıkmış ve daha ciddi tasarımlar yapıyordum. Ajansta tasarım yapmayı, müşteri
ile doğru bir şekilde iletişim kurmayı ve dahasını öğrenirken, okuldaki öğretmen
ve arkadaşlarım ile de öğrendiklerimi pekiştirdim. Artık işe iyice hakim olmuş,
tasarım ve baskı süreçlerini daha iyi kavramıştım. Fakat bilgi ve tecrübe o kadar
büyük bir şey ki, her zaman için daha öğrenecek çok şeyim var. </div>
</div>




<div class="portfolyo">
<div class="portfolyobaslik">Portfolyo</div>
<div class="portfolyoresim">

<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>
</body>
</html>
------------------------------------------------------------------------------------------------------------
CSS KODLARIM

@charset "utf-8";
.container {
background-color: #961618;
background-image: url(../images/Container.png);
height: 6200px;
width: 1024px;
margin-right: auto;
margin-left: auto;
}
.header {
background-image: url(../images/Header.png);
height: 486px;
width: 956px;
margin-right: auto;
margin-left: auto;
}
.hakkimda {
height: 390px;
width: 720px;
margin-left: auto;
margin-top: 150px;
}
.hakkimdabaslik {
height: 40px;
width: 720px;
margin-left: auto;
}
.hakkimdayazi {
height: 350px;
width: 720px;
margin-left: auto;
}
.portfolyo {
height: 4400px;
width: 720px;
margin-left: auto;
margin-top: 150px;
background-color: #264a4c;
}
.portfolyobaslik {
background-color: #F40000;
height: 40px;
width: 720px;
margin-left: auto;
}
.portfolyoresim {
background-color: #FFFFFF;
float: left;
height: 155px;
width: 155px;
margin-left: 20px;
margin-top: 20px;
border: 2px solid #032541;
border-radius: 10px;
}
 
CSS: 
.portfolyoresim {
    background-color: #FFFFFF;
    float: left;
    height: 150px;
    width: 150px;
    /* padding: 20px; */
}

padding'i silmeniz gerekiyor.

Buyur bu da son hali;

Portfolyo - JSFiddle - Code Playground

JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
jsfiddle.net
 
Czarintax dedi:
CSS: 
.portfolyoresim {
    background-color: #FFFFFF;
    float: left;
    height: 150px;
    width: 150px;
    /* padding: 20px; */
}

padding'i silmeniz gerekiyor.
Genişletmek için tıkla...

Padding'i silince beyazlıklar gitti ama resimin en/boy oranı hala dengesiz

grafikibrahim24 dedi:
Padding'i silince beyazlıklar gitti ama resimin en/boy oranı hala dengesiz
İstersen teamweaver indirebilirim bağlanıp 5 dakikada yapayım dersen.
Genişletmek için tıkla...
 
Nayeon dedi:
Width ve Height ile ayarla işte onlarıda. 150px çok 50px yap onu.
Genişletmek için tıkla...

birtane resim yok. 120 tane falan resim koyacağım peşpeşe. Boyutu otomatik doldurmaya ayarlamak istiyorum ki aynı kodu kopyalayıp sadece image ismini değiştirerek halledebileyim.
 
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.…