NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
Mario Brunmayr
Člen
Avatar
Mario Brunmayr:20.7.2016 8:17

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:20.7.2016 11:10

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
Člen
Avatar
Marek Hlavčo:20.7.2016 14:42

Skús

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

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

 
Nahoru Odpovědět
20.7.2016 14:42
Avatar
Mario Brunmayr
Člen
Avatar
Mario Brunmayr:20.7.2016 19:23

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
Člen
Avatar
Mario Brunmayr:20.7.2016 19:49

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
20.7.2016 19:49
Avatar
Neaktivní uživatel
Člen
Avatar
Odpovídá na Mario Brunmayr
Neaktivní uživatel:20.7.2016 19:52

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

Editováno
Nahoru Odpovědět
20.7.2016 19:52
Neaktivní uživatelský účet
Avatar
Michal
Člen
Avatar
Michal:20.7.2016 19:53

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
Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
 
Nahoru Odpovědět
20.7.2016 19:53
Avatar
Mario Brunmayr
Člen
Avatar
Mario Brunmayr:21.7.2016 1:09

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.