Diskuze: <IMG> nadefinovani pomoci CSS responzivni velikost

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

Mario Brunmayr

Člen

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

Tomáš123

Člen

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.

Marek Hlavčo

Člen

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

Mario Brunmayr

Člen

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

Mario Brunmayr

Člen

Mario Brunmayr:20.7.2016 19:49

OPRAVA: toto je HTML kod:
<div id="hlavicka">
<div class="css-slideshow">
<figure><img src="pokus\images\1.jpg" /></figure>
<figure><img src="pokus\images\2.jpg" /></figure>
<figure><img src="pokus\images\3.jpg" /></figure>
<figure><img src="pokus\images\4.jpg" /></figure>
<figure><img src="pokus\images\5.jpg" /></figure>
<figure><img src="pokus\images\6.jpg" /></figure>
<figure><img src="pokus\images\3.jpg" /></figure>
<figure><img src="pokus\images\5.jpg" /></figure>
</div>

</div>

Nahoru Odpovědět

20.7.2016 19:49

Neaktivní uživatel

Člen

Neaktivní uživatel:20.7.2016 19:52

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

Neaktivní uživatelský účet

Michal

Člen

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 20.7.2016 19:53

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

20.7.2016 19:53

Mario Brunmayr

Člen

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.

Nejčastěji vyhledáváné

Diskuze: <IMG> nadefinovani pomoci CSS responzivni velikost