Autor Zpráva
Milan1236000
Profil
Zdravím, po použití CSS se obrázek zobrazuje je částečně - proč? Jak to udělat, aby se zobrazoval celý?
Původní HTML. Přes CSS se zobrazuje jen levý horní roh obrázku.
Taps
Profil
Milan1236000:
viz http://kod.djpw.cz/tpob

Ve tvém druhém příkladu ti chybí u značky img src - Obrázky v HTML
jzikes
Profil *
Ahoj,
on se ti vykreslí, akorát v původní velikosti. Musíš mu nastavit, aby se zmenšil:
<style>
  div { margin: 0; padding: 0; background-image: url(https://poolhouse.s3.amazonaws.com/blog-assets-two/2015/04/pugs1.jpg); border: solid 1px; width: 500px; height: 200px; background-size: 300px,200px; background-repeat: no-repeat; }
</style>
  <div></div>
Psal jsem to dost narychlo, tak jsou tam možná chyby. Asi by to šlo udělat i do toho image, jak si to dělal ty.
-j
Milan1236000
Profil
Díky oběma za radu. Už to funguje, bylo to background-size: cover a background-size: contain.
Milan1236000
Profil
Ještě bych chtěl poradit, jak v CSS ten obrázek roztáhnout stejně, jako to je tady. V CSS se ten obrázek různě natahuje a tak, ale to nechci.
Tomáš123
Profil
Milan1236000:
Ještě bych chtěl poradit, jak v CSS ten obrázek roztáhnout stejně, jako to je tady.
Veď vidíš ako to tam je, keď to chceš tak isto, urob to tak isto. Obávam sa, že bez obšírnejšieho popisu nedokážem pochopiť o čo ti ide.

Riadkové prvky, medzi ktoré obrázok <img> patrí sa centrujú pomocou text-align: center. Hodnota auto vlastnosti margin slúži na centrovanie blokových prvkov.
Milan1236000
Profil
Tomáš123:
Hurá, už se mi povedlo, co jsem potřeboval. Ale i tak se to pokusím trochu vysvětlit, jak jsem to myslel.
Jde o to, že u prvního obrázku můžu v CSS nastavit pevnou výšku a šířku tečkovaného rámečku a v HTML tytéž hodnoty napsat k obrázku, abych docílil toho, že obrázek vyplní tečkovaný rámeček.
U druhého obrázku je to podobné. Tam si také nastavím pevnou výšku a šířku tečkovaného rámečku a plus si na pozadí dám tentýž obrázek, ale pomocí background-size se mi ten obrázek nedařil (vždy jedna nebo obě strany přesahovaly tečkovaný rámeček) roztáhnout do přesných rozměrů tečkovaného rámečku.
Bubák
Profil
Tomáš123:
Hodnota auto vlastnosti margin slúži na centrovanie blokových prvkov.
Někdy se hodí deklarovat obrázek jako blokový, pak jde centrovat automatickým marginem.
Milan1236000
Profil
Tomáš123, Bubák:
Ano, díky.
Snad už jen poslední otázka. Jde u odkazu nastavit v mém případě šířka, aby se odkaz zobrazoval pouze v oblasti tečkovaného rámečku (a ne v celém divu), aniž bych a musel obalovat dalším divem s příslušnými parametry?
Nedaří se mi šířku bez dalšího divu změnit. Snažím se použít co nejméně divů, ale někdy to asi bez nich opravdu nejde, že? :DD
Tomáš123
Profil
Bubák:
Někdy se hodí deklarovat obrázek jako blokový, pak jde centrovat automatickým marginem.
To možno áno, ale Milan1236000 sa v ukážke sťažoval na to, že centrovanie nefunguje (lebo miešal block s inline).

Milan1236000:
Zrejme omylom si sem vložil zlú ukážku (tú istú čo vyššie ako druhý príklad). Tipujem ale, že riešením bude nastaviť prvku <a> display: block, čo spôsobí, že sa roztiahne na rozmery rodiča a bude možné meniť jeho šírku a výšku. To od inline prvkov, ktorým obrázok či odkaz je, nemôžme očakávať.
Milan1236000
Profil
Tomáš123:
Ano, přesně tak jsem to myslel, už to také funguje. Díky. Já jsem do té druhé ukázky jen připsal <a> a vložil sem.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: