H+V vycentrování obrázku o neznámé velikosti [EXPERTS ONLY] – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

H+V vycentrování obrázku o neznámé velikosti  [EXPERTS ONLY] – CSS – Fórum – Programujte.comH+V vycentrování obrázku o neznámé velikosti [EXPERTS ONLY] – CSS – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
Petroff0
Věrný člen
9. 8. 2007   #1
-
0
-

Máte bloky s rozměry [150x150].
Najděte způsob, jak do nich vložit obrázky tak, aby střed bloku byl i středem obrázku.
---------- BONUSY:--------------
#Funguje ve všech moderních browserech
#A to s minimálními rozdíly ve vzhledu
#Bez JavaScriptu
#Originální nápady vítány
#Nekomplikovaný kód
---------- OBRÁZKY:--------------
http://knihy.cpress.cz/DataFiles/Book/00001785/KS0054.jpg [80x117]
http://knihy.cpress.cz/DataFiles/Book/00000549/KS0003.jpg [80x122]
http://knihy.cpress.cz/DataFiles/Book/00000855/KS0008.jpg [80x100]
http://knihy.cpress.cz/DataFiles/Book/00002749/K1404w.jpg [60x114]
http://knihy.cpress.cz/DataFiles/Book/00002846/KH0197_sme.jpg [95x70]
http://knihy.cpress.cz/DataFiles/Document/00000843/ImgLib/natoc3_digi.gif [120x140]
http://knihy.cpress.cz/DataFiles/Document/00000843/ImgLib/K1478_natoc.gif [90x105]

<div class ='cont' style="width:150px;height:150px">

</div>

<img src="http://knihy.cpress.cz/DataFiles/Book/00001785/KS0054.jpg" alt='obal' />
<img src="http://knihy.cpress.cz/DataFiles/Book/00000549/KS0003.jpg" alt='obal' />
<img src="http://knihy.cpress.cz/DataFiles/Book/00000855/KS0008.jpg" alt='obal' />
<img src="http://knihy.cpress.cz/DataFiles/Book/00002749/K1404w.jpg" alt='obal' />
<img src="http://knihy.cpress.cz/DataFiles/Book/00002846/KH0197_sme.jpg" alt='obal' />
<img src="http://knihy.cpress.cz/DataFiles/Document/00000843/ImgLib/natoc3_digi.gif" alt='obal' />
<img src="http://knihy.cpress.cz/DataFiles/Document/00000843/ImgLib/K1478_natoc.gif" alt='obal' />

Nahlásit jako SPAM
IP: ...–
Reklama
Reklama
9. 8. 2007   #2
-
0
-
Nahlásit jako SPAM
IP: ...–
New Media Enthusiast[br] http://about.me/lukaschadraba
Petroff0
Věrný člen
10. 8. 2007   #3
-
0
-

1.YAHUOVO DEFINITIVNÍ ŘEŠENÍ jako definitivně jediný nebere IE7.
Jinak v ostatních to je paráda.
>>> IE6 neumí naprosto přesně počítat - když se mrkneš na poslední box s nejvyšším obrázkem
(a tedy uzounkými kraji => nejsou stejné,spodní je o pár pixelů širší). A zvláštní je že změnami
velikosti písma (IE nezmění absolutně zadané rozměry) lze tuto pixelovou nesymetrii ještě zvyšovat. <<<

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Horizontální&Vertikální centrování obrázku</title>
<base href="http://knihy.cpress.cz/DataFiles/" />
<style>
.cont {width:150px; height:150px; margin:20px; background: gray;
display: table;
_position: relative;
}
.cont div {_position: absolute; _top: 50%; _left: 50%;
display: table-cell; vertical-align: middle;
}
.cont div img {display: block; margin: auto;
_position: relative; _top: -50%; _left: -50%;
}
</style>
</head>
<body>
<div class="cont">
<div>
<img src="Book/00002846/KH0197_sme.jpg" />
</div>
</div>
<div class="cont">
<div>
<img src="Book/00002749/K1404w.jpg" />
</div>
</div>
<div class="cont">
<div>
<img src="Document/00000843/ImgLib/natoc3_digi.gif" />
</div>
</div>
</body>
</html>

1a. Úpravy za účelem funkce i v IE7 mě přivedly do situace, kdy kód sice funguje, ale jedině bez DOCTYPE deklarace.
Někde chyba? Anebo je to vykročení do slepé uličky?
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Horizontální&Vertikální centrování obrázku</title>
<base href="http://knihy.cpress.cz/DataFiles/" />
<style>
.cont {width:150px; height:150px; margin:20px; background: gray;
display: table;
position: relative;
}
.cont div {
display: table-cell; vertical-align: middle;
}
* html .cont div {position: absolute; top: 50%; left: 50%}

.cont div img {display: block; margin: auto;
}
* html .cont div img {position: relative; top: -50%; left: -50%;}
</style>
</head>
<body>
<div class="cont">
<div>
<img src="Book/00002846/KH0197_sme.jpg" />
</div>
</div>
<div class="cont">
<div>
<img src="Book/00002749/K1404w.jpg" />
</div>
</div>
<div class="cont">
<div>
<img src="Document/00000843/ImgLib/natoc3_digi.gif" />
</div>
</div>
</body>
</html>


2.Zkusil jsem nejlogičtější řešení:
Absolutně pozicovaný obrázek(=nahrazovaný prvek) s margin-auto,ale nějak mi nefunguje => obrázek zůstává v levém horním rohu.
Vycházel jsem z rovnice dané specifikací:
top/left + margin + (border+padding) + height/width + (padding+border) + margin + bottom/right = výška/šířka omezujícího bloku
Pro absolutně pozicované prvky/nahrazované/ platí:
Nastavíme-li top,left,bottom,right(=0), pak height/width jsou dány vnitřními rozměry,
a pokud jsou margin-left i margin-right oba auto, musí být shodné ==> CENTER

Nahlásit jako SPAM
IP: ...–
Petroff0
Věrný člen
11. 8. 2007   #4
-
0
-

1b.Naposledy YAHUOVO DEFINITIVNÍ ŘEŠENÍ
Neuvědomil jsem si, že ve standardním režimu IE7 je v CSS kořen.prvek=html.
Tohle je jedna z těch méně častých situací, kdy je nutné v CSS separovat definice pro:
([IE<7] + [IE7]) vs. [OSTATNÍ]
Univerzálně použitelný + validní kód: (lépe či úsporněji to nejde)

<?xml version="1.0" encoding="iso-8859-2"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Horizontální&Vertikální centrování obrázku</title>
<base href="http://knihy.cpress.cz/DataFiles/" />
<style>
.cont {width:150px; height:150px; margin:20px; background: gray;
display: table;
position: relative;
}
.cont div { display: table-cell; vertical-align: middle }
* html .cont div { position: absolute; top: 50%; left: 50% }
*:first-child+html .cont div { position: absolute; top: 50%; left: 50% }

.cont div img { display: block; margin: auto }
* html .cont div img { position: relative; top: -50%; left: -50% }
*:first-child+html .cont div img { position: relative; top: -50%; left: -50% }
</style>
</head>
<body>
<div class="cont">
<div>
<img src="Book/00002846/KH0197_sme.jpg" />
</div>
</div>
<div class="cont">
<div>
<img src="Book/00002749/K1404w.jpg" />
</div>
</div>
<div class="cont">
<div>
<img src="Document/00000843/ImgLib/natoc3_digi.gif" />
</div>
</div>
</body>
</html>

Nahlásit jako SPAM
IP: ...–
Petroff0
Věrný člen
12. 8. 2007   #5
-
0
-

3. STEREO
Výhody: [validní][bez hacků][pro každý browser]
<BONUS> Centruje NAPROSTO PŘESNĚ (v IE při změně velikosti písma se ani nehne).
Nevýhoda: Dvojitý <img> zápis v HTML se projeví při vypnutých stylech jako stereo-obraz .

<?xml version="1.0" encoding="iso-8859-2"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Horizontální&Vertikální centrování obrázku</title>
<base href="http://knihy.cpress.cz/DataFiles/" />
<style>
.cont { width:150px; height:150px; margin:20px; background: gray;
position: relative;
}
.cont div { position: absolute; top: 50%; left: 50% }
.cont .abs { position: absolute; top: -50%; left: -50%; visibility: visible }
.cont img { display: block; visibility: hidden }
</style>
</head>
<body>
<div class="cont">
<div>
<img src="Book/00002846/KH0197_sme.jpg" class="abs" />
<img src="Book/00002846/KH0197_sme.jpg" />
</div>
</div>
<div class="cont">
<div>
<img src="Book/00002749/K1404w.jpg" class="abs" />
<img src="Book/00002749/K1404w.jpg" />
</div>
</div>
<div class="cont">
<div>
<img src="Document/00000843/ImgLib/natoc3_digi.gif" class="abs" />
<img src="Document/00000843/ImgLib/natoc3_digi.gif" />
</div>
</div>
</body>
</html>


Nahlásit jako SPAM
IP: ...–
Petroff0
Věrný člen
12. 8. 2007   #6
-
0
-

Řešení není dokonalé (Opera a Firefox se nepatrně liší při vertical-align:middle, a odlišit tyto browsery pomocí CSS jednoduše neumím).
Zato je nejjednodušší.

<?xml version="1.0" encoding="iso-8859-2"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Horizontální&Vertikální centrování obrázku</title>
<base href="http://knihy.cpress.cz/DataFiles/" />
<style>
.cont {width:150px; height:150px; margin:20px; background: gray;
font: 130px/150px Arial;
text-align:center;
}
html>/**/body .cont img {margin-top:-12%}
.cont img {vertical-align: middle}
</style>
</head>
<body>
<div class="cont">
<img src="Book/00002846/KH0197_sme.jpg" />
</div>
<div class="cont">
<img src="Book/00002749/K1404w.jpg" />
</div>
<div class="cont">
<img src="Document/00000843/ImgLib/natoc3_digi.gif" />
</div>
</body>
</html>

Nahlásit jako SPAM
IP: ...–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 10 hostů

Podobná vlákna

Změna velikosti obrázků — založil Michal Š.

Změna velikosti obrázku — založil Arlene

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý