Làm cách nào để tạo tất cả các hình ảnh có chiều cao và chiều rộng khác nhau giống nhau thông qua CSS?

Tôi đang cố gắng tạo một bức tường hình ảnh bao gồm các bức ảnh sản phẩm. Thật không may, tất cả chúng đều có chiều cao và chiều rộng khác nhau. Làm cách nào để sử dụng css để làm cho tất cả các hình ảnh có cùng kích thước? tốt nhất là 100 x 100.

Tôi đã nghĩ đến việc làm một div có chiều cao và chiều rộng là 100px và sau đó một số cách lấp đầy nó. Không chắc chắn làm thế nào để làm điều đó.

Làm thế nào tôi có thể thực hiện điều này?

Cập nhật câu trả lời (Không hỗ trợ 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">

Câu trả lời ban đầu

.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>

Tôi có thể chỉ cho rằng nếu bạn bóp méo hình ảnh của mình quá nhiều, tức là lấy chúng ra khỏi tỷ lệ, chúng có thể trông không đúng, - một lượng nhỏ cũng không sao, nhưng một cách để làm điều này là đặt hình ảnh vào trong một 'thùng chứa' và đặt vùng chứa thành 100 x 100, sau đó đặt hình ảnh của bạn thành không tràn và đặt chiều rộng nhỏ nhất thành chiều rộng tối đa của vùng chứa, điều này sẽ cắt một chút hình ảnh của bạn,

ví dụ

<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;
}

Bằng cách này, hình ảnh sẽ giữ nguyên kích thước của vùng chứa nhưng sẽ thay đổi kích thước mà không phá vỡ các ràng buộc

Cách đơn giản nhất - Điều này sẽ giữ nguyên kích thước hình ảnh và lấp đầy vùng khác bằng không gian, theo cách này, tất cả các hình ảnh sẽ có cùng một không gian được chỉ định bất kể kích thước hình ảnh mà không bị kéo giãn

.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;

}

Bạn có thể sử dụng thuộc object-fittính để định kích thước các imgphần tử:

• coverkéo dài hoặc thu nhỏ hình ảnh theo tỷ lệ để lấp đầy vùng chứa. Hình ảnh được cắt theo chiều ngang - hoặc dọc nếu cần.
• contain kéo dài hoặc thu nhỏ hình ảnh theo tỷ lệ để vừa với bên trong hộp chứa.
• scale-down thu nhỏ hình ảnh theo tỷ lệ để vừa với bên trong vùng chứa.

.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>

Trong ví dụ trên: màu đỏ là phong cảnh, màu xanh lá cây là chân dung và màu xanh lam là hình vuông. Mô hình ca rô bao gồm các hình vuông 16x16px.

Đối với những người sử dụng Bootstrap và không muốn mất khả năng phản hồi, chỉ cần không đặt chiều rộng của vùng chứa. Đoạn mã sau đây dựa trên bài đăng của 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%;
}

HOẶC style.css

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

Bạn có thể làm theo cách này:

 .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%;
}

Tôi đang tìm giải pháp cho vấn đề tương tự này, để tạo danh sách các biểu trưng.

Tôi đã đưa ra giải pháp này sử dụng một chút flexbox, phù hợp với chúng tôi vì chúng tôi không lo lắng về các trình duyệt cũ.

Ví dụ này giả định một hộp 100x100px nhưng tôi khá chắc chắn rằng kích thước có thể linh hoạt / đáp ứng.

.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: bạn có thể cần thêm một số tiền tố hoặc sử dụng trình sửa lỗi tự động.

Dựa trên câu trả lời của Andi Wilkinson ( câu thứ hai), tôi đã cải thiện một chút, đảm bảo rằng trung tâm của hình ảnh được hiển thị (giống như câu trả lời được chấp nhận đã làm):

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+ */
}

Đặt thông số chiều cao và chiều rộng trong tệp CSS

.ImageStyle{

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

.article-img img{ 
    height: 100%;
    width: 100%;
    position: relative;
    vertical-align: middle;
    border-style: none;
 }

Bạn sẽ tạo kích thước hình ảnh giống như div và bạn có thể sử dụng lưới bootstrap để điều chỉnh kích thước div cho phù hợp

Kích thước hình ảnh không phụ thuộc vào chiều cao và chiều rộng div,

sử dụng phần tử img trong css

Đây là mã css giúp bạn

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

nếu bạn muốn đặt kích thước theo div

dùng cái này

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

bằng mã này, hình ảnh của bạn hiển thị ở kích thước ban đầu nhưng hiển thị tràn 100x100px đầu tiên sẽ ẩn

Nếu không có mã điều này rất khó để giúp bạn nhưng đây là một số lời khuyên thiết thực dành cho bạn:

Tôi nghi ngờ rằng "bức tường hình ảnh" của bạn có một số loại vùng chứa với id hoặc lớp để tạo kiểu cho nó.

ví dụ:

<body>

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

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

Tạo kiểu cho một kích thước trên tất cả các hình ảnh cho tường hình ảnh của bạn, đồng thời không ảnh hưởng đến các hình ảnh khác, chẳng hạn như logo của bạn, v.v. thật dễ dàng nếu mã của bạn được thiết lập tương tự như trên.

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

Nhưng nếu hình ảnh của bạn không phải là hình vuông hoàn hảo, chúng sẽ bị lệch khi sử dụng phương pháp này.

Đi tới tệp CSS của bạn và thay đổi kích thước tất cả các hình ảnh của bạn như sau

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