Do nového roku jako lepší programátoři? Znovu otevíráme večerní školu programování. Nette framework, návrhové vzory, testování nebo vůbec poprvé kurzy ASP.NET dostupné odkudkoli v republice.
Avatar
Mario Brunmayr:

Ahoj, prosimvás chtěl jsem se zeptat o radu ohledně nastylování html tagu <img>. Potřebuji aby se obrázek roztáhl na plnou velikost výšky a šířky ale zároveň se nedeformoval a zobrazovala se vždy část od prostřed obrázku. Myslim to ve smyslu toho že se buď šířka nebo výška obrázku bude zobrazovat normálně ale druhá hodnota se optimalizuje tak že to část obrázku obřízne aby se nedeformoval. Takhle by mělo být pro pozadí ale evidentně tento způsob nefunguje na tag <img>.
background-position:50% 50%;
background-size: cover;
background-repeat:no-repeat;
Jde hlavné o cover. Tuto vlastnost by jsem potřeboval pro tag <img>. Předem děkuji za odpověď.

Mario Brunmayr

 
Odpovědět 20.7.2016 8:17
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Mario Brunmayr
Tomáš123:

To v HTML nejde dosiahnuť. Na čo by si niečo podobné potreboval?

Nahoru Odpovědět 20.7.2016 11:10
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Marek Hlavčo:

Skús

.object-fit_cover {
-o-object-fit: cover;
object-fit: cover;
}

https://css-tricks.com/…/object-fit/

 
Nahoru Odpovědět  +1 20.7.2016 14:42
Avatar
Mario Brunmayr:

CSS kod

      .cb-slideshow: {
    position: relative;

    z-index: 1;

}
.css-slideshow figure{
    height: 40%;
    left: 0;
    margin-left: 10%;
    margin-top: %;
    position: absolute;
    top: 20%;
    width: 80%;
     background-size: cover;
}

.css-slideshow img{
    height: 100%;
    width: 99%;






}
figure:nth-child(1) {
  animation: xfade 48s 42s infinite;
}
figure:nth-child(2) {
  animation: xfade 48s 36s infinite;
}
figure:nth-child(3) {
  animation: xfade 48s 30s infinite;
}
figure:nth-child(4) {
  animation: xfade 48s 24s infinite;
}
figure:nth-child(5) {
  animation: xfade 48s 18s infinite;
}
figure:nth-child(6) {
  animation: xfade 48s 12s infinite;
}
figure:nth-child(7) {
  animation: xfade 48s 6s infinite;
}
figure:nth-child(8) {
  animation: xfade 48s 0s infinite;
}

@keyframes xfade{
  0%{
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  60%{
    opacity: 0;
  }
  98% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#hlavicka {

     height: 50%;
     margin-left: 10%;
     width: 80%;
      margin-top: -2%;
                   background: rgba(67, 206, 25, 1)

}

HTML:

<div id="hlavicka">
        <div class="css-slideshow">
      <figure><img class="object-fit_cover" src="pokus\images\1.jpg" /></figure>
      <figure><img class="object-fit_cover" src="pokus\images\2.jpg" /></figure>
      <figure><img class="object-fit_cover" src="pokus\images\3.jpg" /></figure>
      <figure><img class="object-fit_cover" src="pokus\images\4.jpg" /></figure>
      <figure><img class="object-fit_cover" src="pokus\images\5.jpg" /></figure>
      <figure><img class="object-fit_cover" src="pokus\images\6.jpg" /></figure>
      <figure><img class="object-fit_cover" src="pokus\images\3.jpg" /></figure>
      <figure><img class="object-fit_cover" src="pokus\images\5.jpg" /></figure>
  </div>
<!--<img src="sorrento.jpg" width="100%"> -->
</div>     <!-- hlavička stránky -->

Toto je kod ktery potrebuji upravit tak aby obrazek byl prez celou pozadovanou oblast(jednoduse vyreseno pomoci DIVu a nastaveni hodnot v procentech) ale zaroven aby se nedeformoval i kdyz se mi momentalne deformuje, asi by to slo nastavit tak ze by obrazky byli vlozeny do stranky pomoci CSS ale tento zpusob mi nevyhovuje. Bohuzel object-fit: cover; mi nefungoval ale otazka je jestli to nerusil nejaky jiny prvek ale na zadny jsem neprisel pri testovani ve firebugu.

 
Nahoru Odpovědět 20.7.2016 19:23
Avatar
Mario Brunmayr:

OPRAVA: toto je HTML kod:
<div id="hlavicka">
<div class="css-slideshow">
<figure><img src="pokus\ima­ges\1.jpg" /></figure>
<figure><img src="pokus\ima­ges\2.jpg" /></figure>
<figure><img src="pokus\ima­ges\3.jpg" /></figure>
<figure><img src="pokus\ima­ges\4.jpg" /></figure>
<figure><img src="pokus\ima­ges\5.jpg" /></figure>
<figure><img src="pokus\ima­ges\6.jpg" /></figure>
<figure><img src="pokus\ima­ges\3.jpg" /></figure>
<figure><img src="pokus\ima­ges\5.jpg" /></figure>
</div>
<!--<img src="sorrento.jpg" width="100%"> -->
</div> <!-- hlavička stránky -->

 
Nahoru Odpovědět  -1 20.7.2016 19:49
Avatar
Odpovídá na Mario Brunmayr
Lukáš Tesař:

Piš to prosím do tagu [code.], takhle je to nečitelné

Editováno 20.7.2016 19:52
 
Nahoru Odpovědět 20.7.2016 19:52
Avatar
Michal Struna:

Teď nevím, jestli myslím to samé, co ty, ale zkus přidat (nebo přepsat) do CSS kódu následující:

.css-slideshow img {
  width: auto;
  min-width: 100%;
  height: auto;
  min-height: 100%;
  position: relative;
  left: 100%;
  margin-left: -200%;
  top: 40%;
  margin-top: -40%;
}

.css-slideshow figure {
  overflow: hidden;
}

Pokud to půjde, obrázek se zobrazí celý, pokud ale jeden rozměr <figure> bude výrazně větší, než ten druhý, tak se obrázek pomocí overflow: hidden; usekne. Podařilo se mi docílit i nějakého centrování výsledného výřezu obrázku, ale nemám to odzkoušené a nevím, jestli to bude fungovat všude.

Editováno 20.7.2016 19:53
Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
 
Nahoru Odpovědět 20.7.2016 19:53
Avatar
Mario Brunmayr:

Děkuji, přesně toto jsem potřeboval, pouze jsem lechce upravil kod kvůli centrování a funguje to přesně jak chci.

 
Nahoru Odpovědět 21.7.2016 1:09
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 8 zpráv z 8.