| Autor | Zpráva | ||
|---|---|---|---|
| Kubaaj Profil |
#1 · Zasláno: 5. 6. 2015, 22:59:15
Dobrý den,
jsem teprve začátečník a již delší dobu řeším problém, který má určitě velmi snadné řešení, ovšem ať na webu hledám, jak hledám, najít ho nemohu. Potřeboval bych poradit s umístěním obrázku do obrázku. Abych byl konkrétní, tak mám na webu obrázek telefonu, který chci doplnit o screenshoty z jedné aplikace. Ideální by ale bylo, pokud by se zde ty screenshoty měnili. Nejjednodušší možnost, kterou jsem na to našel, bylo vytvořit ze screenshotů gif. To se povedlo a klasickým pozicováním jsem ho dostal i na obrázek, kde jsem ho chtěl mít. Problém ale nastává při zmenšování či zvětšování okna prohlížeče. V tu chvíli se začínají oba dva obrázky samozřejmě posouvat a stránka se přetransformovává na jinou velikost. To je dobře, tak jsem to chtěl, ovšem problém je, že obrázek telefonu se posouvá jinou rychlostí, než gif ze sreenshotů. Tím pádem screenshot nesedí do telefonu a celé to vypadá katastrofálně. Jako začátečník vůbec nevím, jak to vyřešit. Napadlo mě, že by mohla existovat nějaká možnost, jak pozicovat gif vůči obrázku telefonu, díky které by se oba dva posouvali stejnou rychlostí s stále by se správně překrývaly. Předem moc děkuji za jakoukoli odpověď, či řešení a přeji hezký den. |
||
| juriad Profil |
#2 · Zasláno: 5. 6. 2015, 23:04:58
Kubaaj:
Dodej odkaz na stánku, kde ti to nefunguje. V podstatě stačí: <style>
.telefon {
position: relative;
}
.telefon img {
position: absolute;
left: 20%;
top: 20%;
width: 60%;
}
</style>
<div class="telefon">
<img src="telefon.jpg">
<img src="slideshow.gif">
</div> |
||
| Bubák Profil |
#3 · Zasláno: 6. 6. 2015, 03:45:48
Pokud to nevadí, jde použít obrázek na pozadí, hodnoty paddingu si změníš podle velikosti obrázků.
CSS: .telefon {
padding: 10px 20px;
background: url(telefon.jpg);
}HTML <img class="telefon" src="slideshow.gif"> |
||
|
Časová prodleva: 9 let
|
|||
0