Jak mogę sprawić, by wszystkie obrazy o różnej wysokości i szerokości były takie same za pomocą CSS?

88

Staram się stworzyć ścianę wizerunkową składającą się ze zdjęć produktów. Niestety wszystkie mają różną wysokość i szerokość. Jak mogę użyć CSS, aby wszystkie obrazy miały ten sam rozmiar? najlepiej 100 x 100.

Myślałem o zrobieniu div o wysokości i szerokości 100px, a następnie o tym, jak go wypełnić. NIE wiem, jak to zrobić.

Jak mogę to osiągnąć?

ariel
źródło
1
spraw, aby elementy div miały stałą wysokość / szerokość, a następnie wrzuć obrazy za pomocą znaku overflow:nonei wyśrodkuj obraz w pionie / poziomie w obrębie elementu div.
Marc B
2
@MarcB Chyba masz na myśli overflow: hidden;. :)
insertusernamehere
1
@MarcB nie ma takiego overflow:nonew css. Nawet overflow:hiddennie rozwiąże problemu.
Rajesh Paul

Odpowiedzi:

171

Zaktualizowana odpowiedź (brak obsługi IE11)

img {
    float: left;
    width:  100px;
    height: 100px;
    object-fit: cover;
}
<img src="http://i.imgur.com/tI5jq2c.jpg">
<img src="http://i.imgur.com/37w80TG.jpg">
<img src="http://i.imgur.com/B1MCOtx.jpg">

Oryginalna odpowiedź

.img {
    float: left;
    width:  100px;
    height: 100px;
    background-size: cover;
}
<div class="img" style="background-image:url('http://i.imgur.com/tI5jq2c.jpg');"></div>
<div class="img" style="background-image:url('http://i.imgur.com/37w80TG.jpg');"></div>
<div class="img" style="background-image:url('http://i.imgur.com/B1MCOtx.jpg');"></div>

Simon Arnold
źródło
2
świetna odpowiedź! działa również dla bibliotek takich jak Angular i Vue, gdy chcesz użyć repeatera!
Matt Catellier
1
użycie div zamiast img może mieć wpływ na seo (nie jestem pewien)
Muhammad Ali Mansoor
@MuhammadAliMansoor mogłoby to zrobić, gdybyś nie zrekompensował mikrotadatów. Zaktualizowałem swoją odpowiedź, aby osiągnąć ten sam wynik dzięki tagom img i dopasowaniu obiektów, które teraz mają dobre wsparcie.
Simon Arnold
1
Dlaczego do cholery nie jest to w całym Internecie? Działa nawet z% szerokościami!
Liz
33

czy mogę po prostu dorzucić, że jeśli zbyt mocno zniekształcisz obrazy, tj. wyjmiesz je z proporcji, mogą nie wyglądać dobrze - niewielka ilość jest w porządku, ale jednym ze sposobów jest umieszczenie obrazów w „pojemniku” i ustaw kontener na 100 x 100, a następnie ustaw obraz na brak przepełnienia i ustaw najmniejszą szerokość na maksymalną szerokość kontenera, to jednak przycina kawałek obrazu,

na przykład

<h4>Products</h4>
<ul class="products">
    <li class="crop">
        <img src="ipod.jpg" alt="iPod" />
    </li>
</ul>



.crop {
 height: 300px;
 width: 400px;
 overflow: hidden;
}
.crop img {
 height: auto;
 width: 400px;
}

W ten sposób obraz zachowa rozmiar swojego kontenera, ale zmieni rozmiar bez łamania ograniczeń

Andi Wilkinson
źródło
To moja preferowana metoda. Jest to bardziej praktyczne niż używanie tła.
gillytech
1
To zdecydowanie lepsza opcja, moje obrazy nie były zniekształcone na al.l
pwborodich
31

Najprostszy sposób - Zachowa rozmiar obrazu bez zmian i wypełni inny obszar spacją, w ten sposób wszystkie obrazy będą zajmować tę samą określoną przestrzeń, niezależnie od rozmiaru obrazu, bez rozciągania

.img{
   width:100px;
   height:100px;

/*Scale down will take the necessary specified space that is 100px x 100px without stretching the image*/
    object-fit:scale-down;

}
Manoj Selvin
źródło
1
Wow, to było naprawdę takie proste. Może pozostałe odpowiedzi są „poprawne”, ale ta była najłatwiejsza do wdrożenia.
Randall Arms Jr.
5
Jedynym zastrzeżeniem jest brak obsługi IE11.
Romuloux
Zaletą tego jest to, że obrazy nie są przycięte ani przekrzywione, ale wadą jest to, że nadal nie wszystkie muszą mieć ten sam rozmiar. Zamiast dopasowania do obiektu: zmniejszanie, możesz także wypróbować dopasowanie do obiektu: otulina.
Vincent
19

Możesz użyć tej object-fitwłaściwości do zmiany rozmiaru imgelementów:

  • coverrozciąga lub zmniejsza obraz proporcjonalnie, aby wypełnić pojemnik. W razie potrzeby obraz jest przycinany w poziomie - lub - w pionie.
  • contain rozciąga lub zmniejsza obraz proporcjonalnie, aby zmieścić się w pojemniku.
  • scale-down zmniejsza proporcjonalnie obraz, aby zmieścił się w pojemniku.

.example {
  margin: 1em 0;
  text-align: center;
}

.example img {
  width: 30vw;
  height: 30vw;
}

.example-cover img {
  object-fit: cover;
}

.example-contain img {
  object-fit: contain;
}
<div class="example example-cover">
  <img src="https://i.stack.imgur.com/B0EAo.png">
  <img src="https://i.stack.imgur.com/iYkNH.png">
  <img src="https://i.stack.imgur.com/gne9N.png">
</div>

<div class="example example-contain">
  <img src="https://i.stack.imgur.com/B0EAo.png">
  <img src="https://i.stack.imgur.com/iYkNH.png">
  <img src="https://i.stack.imgur.com/gne9N.png">
</div>

W powyższym przykładzie: czerwony to krajobraz, zielony to portret, a niebieski to kwadratowy obraz. Wzór w kratkę składa się z kwadratów 16x16px.

Salman A
źródło
1
To jest świetne, z wyjątkiem tego, że nie działa w żadnej wersji IE. caniuse.com/#feat=object-fit
Jameela Huq
3

Dla tych, którzy używają Bootstrap i nie chcą stracić responsywności, po prostu nie ustawiaj szerokości kontenera. Poniższy kod jest oparty na poście Gillytech .

index.hmtl

<div id="image_preview" class="row">  
    <div class='crop col-xs-12 col-sm-6 col-md-6 '>
         <img class="col-xs-12 col-sm-6 col-md-6" 
          id="preview0" src='img/preview_default.jpg'/>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6">
         more stuff
    </div>

</div> <!-- end image preview -->

style.css

/*images with the same width*/
.crop {
    height: 300px;
    /*width: 400px;*/
    overflow: hidden;
}
.crop img {
    height: auto;
    width: 100%;
}

LUB style.css

/*images with the same height*/
.crop {
    height: 300px;
    /*width: 400px;*/
    overflow: hidden;
}
.crop img {
    height: 100%;
    width: auto;
}
Sven Ya
źródło
3

Możesz to zrobić w ten sposób:

 .container{
position: relative;
width: 100px;
height: 100px;
overflow: hidden;
z-index: 1;
}

img{
left: 50%;
position: absolute;
top: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
max-width: 100%;
}
Arun ks
źródło
1

Szukałem rozwiązania tego samego problemu, aby stworzyć listę logo.

Wymyśliłem to rozwiązanie, które wykorzystuje trochę flexboksa, które działa dla nas, ponieważ nie martwimy się o stare przeglądarki.

W tym przykładzie założono pudełko 100x100px, ale jestem prawie pewien, że rozmiar może być elastyczny / responsywny.

.img__container {
    display: flex;
    padding: 15px 12px;
    box-sizing: border-box;
    width: 100px; height: 100px;

    img {
        margin: auto;
        max-width: 100%;
        max-height: 100%;
    }
}

ps .: może być konieczne dodanie przedrostków lub użycie autoprefiksera.

rafaelbiten
źródło
1

Opierając się na odpowiedzi Andi Wilkinsona (drugiej), poprawiłem się trochę, upewnij się, że środek obrazu jest pokazany (tak jak zrobiła to zaakceptowana odpowiedź):

HTML:

<div class="crop">
   <img src="img.png">
</div>

CSS:

.crop{
  height: 150px;
  width: 200px;
  overflow: hidden;
}
.crop img{
  width: 100%;
  height: auto;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
  -ms-transform: translateY(-50%); /* IE 9 */
  transform: translateY(-50%); /* IE 10, Fx 16+, Op 12.1+ */
}
Alexee
źródło
1

Ustaw parametry wysokości i szerokości w pliku CSS

.ImageStyle{

    max-height: 17vw;
    min-height: 17vw;
    max-width:17vw;
    min-width: 17vw;
    
}

Ema
źródło
1
.article-img img{ 
    height: 100%;
    width: 100%;
    position: relative;
    vertical-align: middle;
    border-style: none;
 }

Rozmiar obrazu będzie taki sam jak div i możesz użyć siatki bootstrap, aby odpowiednio manipulować rozmiarem div

Manav Kothari
źródło
0

Rozmiar obrazu nie zależy od wysokości i szerokości div,

użyj elementu img w css

Oto kod CSS, który Ci pomoże

div img{
         width: 100px;
         height:100px;
 }

jeśli chcesz ustawić rozmiar według div

Użyj tego

div {
    width:100px;
    height:100px;
    overflow:hidden;
}

za pomocą tego kodu obraz zostanie wyświetlony w oryginalnym rozmiarze, ale pokaże pierwsze przepełnienie 100x100px zostanie ukryte

asad raza
źródło
0

Bez kodu trudno jest ci to pomóc, ale oto kilka praktycznych porad:

Podejrzewam, że twoja „ściana obrazu” ma jakiś pojemnik z identyfikatorem lub klasą, aby nadać jej style.

na przykład:

<body>

<div id="maincontainer">
  <div id="header"></div>

  <div id="content">
    <div id="imagewall">
      <img src"img.jpg">
<!-- code continues -->

Stylizacja rozmiaru na wszystkich obrazach ściany z obrazami bez wpływu na inne obrazy, takie jak logo itp., Jest łatwa, jeśli kod jest skonfigurowany podobnie do powyższego.

#imagewall img {
  width: 100px;
  height: 100px; }

Ale jeśli obrazy nie są idealnie kwadratowe, zostaną przekrzywione przy użyciu tej metody.

1934286
źródło
0

Przejdź do pliku CSS i zmień rozmiar wszystkich obrazów w następujący sposób

img {
  width:  100px;
  height: 100px;
}
bakslash
źródło
proste i proste!
KiwenLau