Diskuze: <IMG> nadefinovani pomoci CSS responzivni velikost

HTML a CSS HTML a CSS <IMG> nadefinovani pomoci CSS responzivni velikost American English version English version

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. července 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. července 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. července 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. července 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. července 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. července 19:52
 
Nahoru Odpovědět 20. července 19:52
Avatar
Oxtimus
Člen
Avatar
Oxtimus:

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. července 19:53
Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
 
Nahoru Odpovědět 20. července 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. července 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.