Bu ders, düşündüğümüz bir öncekinin bir tür devamıdır, şimdi bilginizi derinleştirmenin ve görmenin zamanı geldi. CSS özellikleri Görüntüler.
CSS'de görüntü boyutları
Bakalım burada yenilikler neler, görüntünün boyutlarını, genişliğin genişliği ve yüksekliğin bizim yüksekliğimiz olduğunu belirlediğim bir img sınıfı oluşturdum, boyutları orijinal olanlardan daha fazla belirttim, böylece görüntünün nasıl olduğunu açıkça görebilirsiniz. değişecek.
Netlik için, çok fazla metnin olacağı bir örnek vereceğim ve görüntüdeki girintilerin ne olduğunu göreceksiniz. bu örnek yeteneklerini değerlendirmeniz için size bir şans verecek olan margin özelliğini kullanacağız.
Anlaşılır olması açısından yazının çok olacağı bir örnek vereceğim ve bu örnekte resimden gelen girintilerin ne olduğunu göreceksiniz, farkı net görebilmeniz için girintileri ayarlamadan bir resim kullanacağız.
Tarayıcıda aşağıdakileri görüyoruz:
Bu örnekte, bize 20 pikselin dört kenarından da girintiler veren margin parametresi sayesinde görüntüden girintiler yaptım. Burada daha zor manipülasyonlar yapabilirsiniz, girintiyi belirli bir kenardan ayarlayabilirsiniz, örneğin:
- margin-top - üst taraftan kenar boşluğu
- sağ kenar boşluğu - sağ kenar boşluğu
- margin-bottom - alt kenardan kenar boşluğu
- sol kenar boşluğu - sol kenar boşluğu
Buna göre, burada her şeyi daha ince ayarlayabilir veya girintiyi diğerlerine dokunmadan sadece bir veya iki taraftan ayarlayabilirsiniz.
Tarayıcıda:
Çerçeveyi görüntünün çevresine yerleştiriyoruz border parametresi sayesinde önce border-width kullanarak çerçevenin genişliğini ayarlıyoruz, piksel olarak ayarlıyoruz, sonra çerçevenin stilini yani border-style görünümünü orada seçebileceğiniz birkaç değer vardır:
Ve ayarlayacağımız son parametre border-color parametresi ile belirlenen border rengidir.
Tarayıcıda şunu görüyoruz:
Anlayacağınız üzere body etiketine arkaplanı etiket seçici sayesinde atadık çünkü belgenin tamamını kapladığı için başka etiketler de atayabiliyoruz. background parametresi arka planı bizim için bir resim, parantez içinde yazdığımız adresi yaptı. Arka planı da değiştirebilirsiniz, örneğin:
arka plan: url(proba.png) tekrar-x;
Arka plan yalnızca X ekseni boyunca, yani tek bir satırda yatay olarak tekrar edecektir.
arka plan: url(proba.png) tekrar-y;
Arka plan yalnızca Y ekseni boyunca, yani tek bir satırda dikey olarak yinelenecektir.
arka plan: url(proba.png) tekrarsız;
Arka plan tekrar etmeyecek, ancak yalnızca bir görüntü görünecektir.
arka plan boyutu: 500 piksel 200 piksel;
BT ek parametre Resmin arka plan boyutunu, genişliğini ve yüksekliğini ayarlayan A.
CSS ile görüntü şeffaflığı
Tarayıcıda aşağıdakileri görüyoruz:
Bu özellik, CSS3'ün gelişiyle birlikte geldi ve aslında oldukça geniş bir kullanım aldı. Opaklık parametresi kullanılarak uygulanan görüntünün şeffaflığını, 0'dan 1'e kadar olan değerleri ve ikinci filtre parametresini ayarlar: alpha(Opaklık=50); için aynısını yapar internet tarayıcısı Explorer eski sürümler opacity parametresini desteklemediği için 0 ile 100 arasındaki değerlerdir. Örnekte farkı net görebilmeniz için özel olarak iki resim yaptım.
Bu, CSS Görüntü Özellikleri dersini sonlandırıyor, umarım bu ders sizin için yararlı olmuştur ve dili daha fazla çalışmanız ve yeni bilgiler edinmeniz için size ilham vermiştir.
Yayın tarihi: 2014-04-22
Görüntüler hemen hemen her sitenin bileşenleridir, bu nedenle yeniden boyutlandırma vazgeçilmezdir. Bir resmi yeniden boyutlandırmanın 2 yolu vardır: grafik düzenleyici veya programlı olarak HTML Kodu css'de.
eğer css kodu html'de görüntünün boyutunu ayarlamayın, sitedeki yüksekliği ve genişliği piksel cinsinden aynı olacaktır. Kaynak dosyası. Yani, sadece bir grafik düzenleyici kullanarak css ve html olmadan bir resmi yeniden boyutlandırabilirsiniz ve boyutunu belirtmezseniz sitede otomatik olarak değişecektir. Ancak, css'deki bir görüntünün boyutunu programlı olarak html'ye değiştirmenin gerekli olduğu durumlar vardır.
1. Grafik düzenleyicide resmi değiştirme
Resmin boyutunu herhangi bir grafik düzenleyicide (photoshop, gimp, xnview) değiştirebilirsiniz ve sitede orijinal boyutuna göre otomatik olarak değişecektir.
Yöntemin avantajları:
Resim daha hızlı yüklenir, çünkü daha sonra programlı olarak sıkıştırılacak olan fazladan veri (piksel) indirmeniz gerekmez.
eksileri:
Grafik düzenleyiciler, genişlik ve yükseklikte 200 pikselden daha az olan görüntüleri yetersiz şekilde sıkıştırır.
Mümkün ve uygun olduğunda, resimlerin programlı olarak yeniden boyutlandırıldığından daha hızlı yüklenmesi için bir grafik düzenleyicide yeniden boyutlandırmayı deneyin. Hız farkı onlarca kat olabilir.
2. Sitedeki css kodundaki görseli değiştirme
Artıları:
Boyutu ayarlamak için daha hızlı ve daha uygun. Bu method görüntü küçültme genellikle kolaylık sağlamak için kullanılır. Örneğin, bir resim birçok farklı boyuta sahip olduğunda, aynı resmin değerlerini programlı olarak değiştirmek, bir grafik düzenleyicide düzenlenen bir resmin tüm format seçeneklerini yüklemekten genellikle daha uygundur.
Grafik düzenleyicilerin aksine, yüksekliği veya genişliği 200 pikselden az olan, niteliksel olarak sıkıştırılmış küçük resimler. Sitede görsel boyutunun 200 pikselden küçük olmasını istiyorsanız, orijinal boyutun %30-50 (260-300 piksel) daha büyük olması kaydetmek için daha iyidir. iyi kalite azalırken.
Aynı zamanda site yükleme hızındaki fark hissedilmeyecektir, çünkü küçük resimler çok az yer kaplar ve boyutlarını %30 oranında artırırsanız herhangi bir değişiklik fark etmezsiniz. Ama kalite farkına dikkat edin.
eksileri:
Yeniden boyutlandırma yalnızca orijinal sürümü indirdikten sonra gerçekleştiğinden, program aracılığıyla sıkıştırılmış resimlerin yüklenmesi daha uzun sürer. Bu nedenle, görüntü boyutu genişlik veya yükseklik olarak 200 pikselden fazlaysa, sitenin daha hızlı çalışması için bir grafik düzenleyicide sıkıştırmak daha iyidir.
css kullanarak html resmi nasıl yeniden boyutlandırılır
Bir resmi html olarak yeniden boyutlandırmak için cssözellikler kullanılır genişlik (genişlik) ve yükseklik (yükseklik) stil özelliğinin içinde. Yalnızca genişlik veya yükseklik yazabilirsiniz ve kalan belirtilmemiş değer, resmin en boy oranını korurken otomatik olarak değişecektir. Örneğin, genişliği kullanarak bir görüntünün yalnızca genişliğini belirterek, en boy oranını koruyarak yüksekliği otomatik olarak değişecektir. Ve tam tersi, yalnızca yüksekliği (yükseklik) belirtirken, genişliği de otomatik olarak değişecek ve görüntünün en boy oranı korunacaktır.
Resim boyutlarını belirtmeden kod örneği
Tarayıcıda sonuç
Sayfa kodu
.css'de resmin yeniden boyutlandırılmasıyla örnek kod
Tarayıcıda sonuç
Sayfa kodu
style="width:150px; ">
Yukarıdaki örneklerin her ikisi de 300x184 piksel (genişlik ve yükseklik) boyutunda aynı görüntüyü kullanır. 1 örnekte, genişlik ve yükseklik css'de belirtilmediğinden, görüntü tarayıcıda 300x184 piksel orijinal boyutunda değişiklik yapılmadan görüntülendi. Ve 2. örnekte, resim tarayıcıda 2 kat azaltılarak görüntülendi, genişlik 150 piksel olarak belirtildiğinden yükseklik buna göre otomatik olarak 92 piksele değiştirildi. Görüldüğü gibi height özelliği genişlikle orantılı olarak otomatik olarak değiştiği için hiç belirtilmemiş olabilir.
Her iki seçeneği de sağlarsanız: genişlik (genişlik), yükseklik (yükseklik) ve oranlara karşılık gelmeyecekler, o zaman resim tam olarak bu boyuta sahip olacak, ancak değerlere bağlı olarak sıkıştırılmış veya gerilmiş bir biçimde olacaktır.
Resimleri büyütmek neden istenmiyor?
Önemli: Resmin boyutunun artması kalite kaybına neden olur. Herhangi bir şekilde değiştirirken, değerleri orijinal görüntüden daha az ayarlamak, yani sadece azaltmak önemlidir.
Piksel boyutunu orijinal görüntüden daha büyük olarak ayarlarsanız kalite bozulur. Ve kalite kaybı açıkça görülecektir, çünkü bilgisayar yeni pikseller ekleyemez, yalnızca mevcut olanların boyutunu artırabilir. Görüntü büyütme orijinal değerinden ne kadar büyük olursa, kalitesi o kadar kötü olur ve kare pikseller o kadar net görünür.
Bir etiketi HTML kullanarak yeniden boyutlandırmak için genişlik (genişlik) ve yükseklik (yükseklik) özellikleri sağlanır. Değer olarak pikseller kullanılır ve bağımsız değişkenler görüntünün fiziksel boyutlarıyla eşleşmelidir. Örneğin, Şek. 10.6, 100x111 piksel boyutlarına sahip bir görüntüyü gösterir.
Pirinç. 10.6. orijinal boyuttaki resim
Buna göre, bu şekli yerleştirmek için HTML kodu örnek 10.4'te gösterilmiştir.
Örnek 10.4. Çizim boyutları
Resmin boyutları açıkça belirtilirse, tarayıcı bunları, belgenin yüklenmesi sırasında resme karşılık gelen boş alanı görüntülemek için kullanır (Şekil 10.7). Aksi takdirde tarayıcı görüntünün genişliğini ve yüksekliğini değiştirmeden önce görüntünün tamamen yüklenmesini bekler (Şekil 10.8). Bu durumda, başlangıçta resmin boyutu bilinmediğinden ve otomatik olarak küçük olarak ayarlandığından, metin yeniden biçimlendirilebilir.
Pirinç. 10.7. Resmin boyutu belirtilmedi ve henüz yüklenmedi
Pirinç. 10.8. Resim yüklendi, metin yeniden biçimlendirildi
Resmin genişliği ve yüksekliği hem yukarı hem de aşağı değiştirilebilir. Ancak, dosya boyutu değişmediği için bu, resmin indirme hızını hiçbir şekilde etkilemez. Bu nedenle, görüntüyü dikkatli bir şekilde azaltın, çünkü. bu, okuyucular arasında kafa karışıklığına neden olabilir, bu kadar küçük bir çizimin yüklenmesi neden bu kadar uzun sürüyor. Ancak boyutu artırmak ters etkiye yol açar - görüntü boyutu büyüktür, ancak dosya aynı boyuttaki görüntüye göre daha hızlı yüklenir.
Şek. 10.9, Şekil 1'de gösterilenle aynı görüntüyü gösterir. 10.6, ancak genişlik ve yükseklik olarak iki katına çıktı.
Pirinç. 10.9. Tarayıcıda büyütülmüş resmin görünümü
Böyle bir çizimin kodu hemen hemen değişmeden kalacaktır ve Örnek 10.5'te gösterilmiştir.
Örnek 10.5. Bir resmi yeniden boyutlandırma
Bu tür yeniden boyutlandırmaya yeniden örnekleme denir ve tarayıcı algoritması, grafik düzenleyicilere göre yetenekleri bakımından daha düşüktür. Bu nedenle sadece özel durumlarda görüntüyü bu şekilde artırmak gerekir aksi halde görüntü kalitesi çok fazla bozulur. Bir çeşit grafik programı kullanmak daha iyidir. Bunun istisnası, dikdörtgen alanlar içeren çizimlerdir. Şek. Şekil 10.10, 54 bayt alan ve orijinal boyutu 8 x 8 piksel olan, 150 piksele kadar ölçeklendirilmiş bir desen dosyasını göstermektedir.
Pirinç. 10.10. Büyütülmüş Resim
Tarayıcılar yeniden örnekleme için iki algoritma kullanır - bikübik (pürüzsüz kenarlar ve düzgün bir renk tonu aralığı verir) ve en yakın noktalar (orijinal renk kümesini ve keskin kenarları korur). Tarayıcıların son sürümleri bikübik algoritma kullanırken, eski tarayıcılar tam tersine en yakın nokta algoritmasını kullanır.
Talimat
İlk olarak, arama motorlarını kullanarak resmi bulmaya çalışın. Bir sorgu girin ve ardından arama ayarları sekmesini seçin. Örneğin Google'da bir "Arama Araçları" düğmesi bulunurken, Yandex'in kaydırıcılı bir simgesi vardır. "Boyut" öğesini seçmeniz ve tam değerleri belirtmeniz gerektiğinde. Veya örneğin, iyi bir çözünürlüğe sahip bir fotoğrafa ihtiyacınız varsa, "Büyük" öğesini seçin.
İstenilen boyutta resim yoksa, çerçeveye kendiniz ayarlanabilir. Yollar var. Birincisi, önce istediğiniz boyutta bir belge oluşturmanız ve ardından resmi değiştirmenizdir. İkincisi tam tersi - resmi açın ve boyutu değiştirin. Esasen hiçbir fark yoktur: hepsi tercihlerinize ve hedeflerinize bağlıdır. Örnekler Adobe Photoshop'ta ele alınacaktır, ancak diğer grafik düzenleyicileri kullanabilirsiniz.
İlk yol. "Dosya" - "Oluştur ..." veya Ctrl + N tuş kombinasyonunu tıklayın. Önünüzde ayarların olduğu bir pencere belirecektir. Burada genişlik, yükseklik ve gerekli renk çözünürlüğü parametrelerini belirtin. Ardından tarayıcıda beğendiğiniz resmi açın, sağ tıklayın ve "Resmi Kopyala" seçeneğini seçin. Ardından programa dönün ve Ctrl + V kombinasyonuna basın.
Resim, grafik düzenleyici penceresinde görünecektir. Ardından "Düzenleme" - "Serbest Dönüşüm" veya Ctrl + T kombinasyonunu tıklayın. Görüntüyü çalışma penceresinin boyutuna sığdırabileceğiniz kilit noktalar görünecektir. İstediğiniz sonucu alır almaz (bu arada, çalışma alanının sınırlarının ötesine geçebilirsiniz), "Dosya" - "Farklı kaydet ..." veya Ctrl + S tuş kombinasyonunu tıklayın.
İkinci yol. Önce bilgisayara gitmeniz, ardından "Dosya" - "Aç ..." (veya Ctrl + O kombinasyonu) üzerine tıklamanız ve istediğiniz görüntüyü seçmeniz gerekir. Ardından "Görüntü" - "Görüntü Boyutu ..." öğesini seçin veya Alt + Ctrl + I tuşlarına basın. "En boy oranını koru" seçeneğinin işaretini kaldırın ve istediğiniz boyutu seçin. Ardından Tamam tuşuna basın.
Fotoğraf, kağıt baskı standartlarına göre santimetre (milimetre, inç) cinsinden belirtilen boyuta ve DPI cinsinden belirtilen boyuta göre yeniden boyutlandırılacaktır. Boyutlar cm, mm ve inç cinsinden binde bir doğrulukla belirtilebilir, örneğin 15x10 formatı yerine 15.201x10.203 cm olarak ayarlayabilirsiniz.
Dikey (portre) konumda standart fotoğraf boyutlarına sahip tablo:
| Santimetre (cm) cinsinden fotoğraf formatı | Milimetre cinsinden boyut (mm) | piksel cinsinden boyut (baskı için 300dpi) |
En Boy Oranı (yatay yönde) |
| 3x4 (manuel kesimden sonra) | 30x40 | 354x472 | 4:3 (1.33) |
| 3.5x4.5 (manuel kesimden sonra) | 35x45 | 413x531 | 4:3 (1.33) |
| 9x13 | 89x127 | 1063x1535 | 10:7 (1.43) |
| 10x15 | 102x152 | 1181x1772 | 3:2 (1.5) |
| 13x18 | 127x178 | 1535x2126 | 7:5 (1.4) |
| 15x20(≈A5) | 152x203 | 1772x2362 | 4:3 (1.33) |
| 15x21 | 152x216 | 1772x2480 | 4:3 (1.33) |
| 18x24 | 178x240 | 2126x2835 | 19:14 (1.36) |
| 20x25 | 203x254 | 2362x2953 | 5:4 (1.25) |
| 20x30(≈A4) | 203х305 | 2362x3543 | 3:2 (1.5) |
| 30x40 | 305x406 | 3543x4724 | 4:3 (1.33) |
| 30x45 | 305x457 | 3543x5315 | 3:2 (1.5) |
Standart kağıt sayfası boyutu A4 formatı- 300 dpi'de 21x29.7 cm veya 2480x3508 piksel. Diğer sayfa biçimlerinin boyutları Wikipedia sayfasında görülebilir, ancak boyutların orada milimetre ve inç olarak listelendiğini unutmayın, yani. bu sayfadaki ayarlarda uygun değeri seçmeniz gerekir.
Bir fotoğrafı DPI'yi (inç başına nokta) hesaba katmadan, yani yalnızca belirtilen biçimin oranlarına saygı duymadan yeniden boyutlandırmanız gerekiyorsa, ayarlarda "DPI cinsinden Boyut" parametresini "0" olarak ayarlamanız gerekir.
Orijinal görüntü hiçbir şekilde değiştirilmez. Size başka bir işlenmiş resim verilecektir.