Web tasarım, img src boyutlandırması

grafikibrahim24 · 4 Mart 2019

İ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.

Czarintax · 4 Mart 2019

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

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

jsfiddle.net

grafikibrahim24 · 4 Mart 2019

Czarintax dedi:
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

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

jsfiddle.net

Ö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?

Czarintax · 4 Mart 2019

Sayfanın tam kodunu atabilirseniz yardımcı olmaya çalışırım.

grafikibrahim24 · 4 Mart 2019

Czarintax dedi:
Sayfanın tam kodunu atabilirseniz yardımcı olmaya çalışırım.

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;
}

Czarintax · 4 Mart 2019

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

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

jsfiddle.net

grafikibrahim24 · 4 Mart 2019

Czarintax dedi:
CSS:

.portfolyoresim { background-color: #FFFFFF; float: left; height: 150px; width: 150px; /* padding: 20px; */ }

padding'i silmeniz gerekiyor.

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.

Nayeon · 4 Mart 2019

grafikibrahim24 dedi:
Padding'i silince beyazlıklar gitti ama resimin en/boy oranı hala dengesiz
Eki Görüntüle 374628 Eki Görüntüle 374627

Width ve Height ile ayarla işte onlarıda. 150px çok 50px yap onu.

grafikibrahim24 · 4 Mart 2019

Nayeon dedi:
Width ve Height ile ayarla işte onlarıda. 150px çok 50px yap onu.

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.

Nayeon · 4 Mart 2019

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

Hepsine aynı class ismini ver olsun bitsin.