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ąć?
overflow:none
i wyśrodkuj obraz w pionie / poziomie w obrębie elementu div.overflow: hidden;
. :)overflow:none
w css. Nawetoverflow:hidden
nie rozwiąże problemu.Odpowiedzi:
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>
źródło
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ń
źródło
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; }
źródło
Możesz użyć tej
object-fit
właściwości do zmiany rozmiaruimg
elementów:cover
rozcią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.
źródło
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; }
źródło
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%; }
źródło
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.
źródło
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+ */ }
źródło
Ustaw parametry wysokości i szerokości w pliku CSS
.ImageStyle{ max-height: 17vw; min-height: 17vw; max-width:17vw; min-width: 17vw; }
źródło
.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
źródło
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
źródło
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.
źródło
Przejdź do pliku CSS i zmień rozmiar wszystkich obrazów w następujący sposób
img { width: 100px; height: 100px; }
źródło