ฉันจะสร้างภาพทั้งหมดที่มีความสูงและความกว้างต่างกันผ่าน CSS ได้อย่างไร

ฉันกำลังพยายามสร้างกำแพงรูปภาพที่ประกอบด้วยภาพถ่ายผลิตภัณฑ์ น่าเสียดายที่ทั้งหมดมีความสูงและความกว้างต่างกัน ฉันจะใช้ css เพื่อทำให้ภาพทั้งหมดมีขนาดเท่ากันได้อย่างไร โดยเฉพาะอย่างยิ่ง 100 x 100

ฉันกำลังคิดว่าจะสร้าง div ที่มีความสูงและความกว้าง 100px จากนั้นจะเติมมันอย่างไร ไม่แน่ใจว่าจะทำอย่างไร

ฉันจะทำสิ่งนี้ให้สำเร็จได้อย่างไร?

คำตอบที่อัปเดต (ไม่รองรับ 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">

คำตอบเดิม

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

ฉันจะโยนมันลงไปได้ไหมถ้าคุณบิดเบือนรูปภาพของคุณมากเกินไปเช่นเอามันออกจากอัตราส่วนมันอาจดูไม่ถูกต้อง - ปริมาณเล็กน้อยก็ใช้ได้ แต่วิธีหนึ่งที่ทำได้คือใส่รูปภาพไว้ใน 'คอนเทนเนอร์' และตั้งค่าคอนเทนเนอร์เป็น 100 x 100 จากนั้นตั้งค่ารูปภาพของคุณให้ไม่เกินไม่มีและตั้งค่าความกว้างที่เล็กที่สุดเป็นความกว้างสูงสุดของคอนเทนเนอร์ซึ่งจะเป็นการครอบตัดรูปภาพของคุณเล็กน้อย

ตัวอย่างเช่น

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

ด้วยวิธีนี้รูปภาพจะคงขนาดของคอนเทนเนอร์ไว้ แต่จะปรับขนาดโดยไม่ทำลายข้อ จำกัด

วิธีที่ง่ายที่สุด - วิธีนี้จะรักษาขนาดภาพให้เหมือนเดิมและเติมพื้นที่อื่น ๆ ด้วยวิธีนี้ภาพทั้งหมดจะใช้พื้นที่ที่กำหนดเท่ากันโดยไม่คำนึงถึงขนาดภาพ

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

}

คุณสามารถใช้object-fitคุณสมบัติเพื่อปรับขนาดimgองค์ประกอบ:

• coverยืดหรือหดรูปภาพตามสัดส่วนเพื่อเติมเต็มคอนเทนเนอร์ ภาพจะถูกครอบตัดในแนวนอนหรือแนวตั้งหากจำเป็น
• contain ยืดหรือหดรูปภาพตามสัดส่วนเพื่อให้พอดีกับภายในคอนเทนเนอร์
• scale-down ย่อรูปภาพตามสัดส่วนเพื่อให้พอดีกับภายในคอนเทนเนอร์

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

ในตัวอย่างด้านบน: สีแดงคือแนวนอนสีเขียวคือแนวตั้งและสีน้ำเงินเป็นภาพสี่เหลี่ยมจัตุรัส รูปแบบตาหมากรุกประกอบด้วยสี่เหลี่ยม 16x16px

สำหรับผู้ที่ใช้Bootstrapและไม่ต้องการสูญเสียการตอบสนองก็อย่ากำหนดความกว้างของคอนเทนเนอร์ รหัสต่อไปนี้อ้างอิงจาก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%;
}

หรือstyle.css

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

คุณสามารถทำได้ด้วยวิธีนี้:

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

ฉันกำลังมองหาวิธีแก้ปัญหาเดียวกันนี้เพื่อสร้างรายการโลโก้

ฉันคิดวิธีแก้ปัญหานี้โดยใช้ flexbox ซึ่งเหมาะกับเราเนื่องจากเราไม่กังวลกับเบราว์เซอร์เก่า

ตัวอย่างนี้ถือว่าเป็นกล่องขนาด 100x100px แต่ฉันค่อนข้างมั่นใจว่าขนาดสามารถยืดหยุ่น / ตอบสนองได้

.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: คุณอาจต้องเพิ่มคำนำหน้าหรือใช้ autoprefixer

จากคำตอบของ Andi Wilkinson (ข้อที่สอง) ฉันปรับปรุงเล็กน้อยตรวจสอบให้แน่ใจว่าตรงกลางของภาพปรากฏขึ้น (เหมือนคำตอบที่ยอมรับ):

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

ตั้งค่าพารามิเตอร์ความสูงและความกว้างในไฟล์ 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;
 }

คุณจะทำให้ภาพมีขนาดเท่ากับ div และคุณสามารถใช้ bootstrap grid เพื่อจัดการกับขนาด div ได้

ขนาดภาพไม่ได้ขึ้นอยู่กับความสูงและความกว้างของ div

ใช้องค์ประกอบ img ใน css

นี่คือรหัส css ที่ช่วยคุณได้

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

หากคุณต้องการกำหนดขนาดด้วย div

ใช้สิ่งนี้

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

โดยรหัสนี้รูปภาพของคุณจะแสดงในขนาดดั้งเดิม แต่แสดงเกิน 100x100px แรกจะซ่อน

หากไม่มีรหัสสิ่งนี้เป็นเรื่องยากที่จะช่วยคุณ แต่นี่คือคำแนะนำที่เป็นประโยชน์สำหรับคุณ:

ฉันสงสัยว่า "ภาพวอลล์" ของคุณมีคอนเทนเนอร์บางประเภทที่มีรหัสหรือคลาสเพื่อกำหนดรูปแบบ

เช่น:

<body>

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

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

การจัดรูปแบบขนาดบนรูปภาพทั้งหมดสำหรับผนังรูปภาพของคุณในขณะที่ไม่ส่งผลกระทบต่อรูปภาพอื่น ๆ เช่นโลโก้ของคุณ ฯลฯ เป็นเรื่องง่ายหากโค้ดของคุณตั้งค่าคล้ายกับด้านบน

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

แต่ถ้ารูปภาพของคุณไม่ได้เป็นสี่เหลี่ยมจัตุรัสอย่างสมบูรณ์พวกเขาจะบิดเบี้ยวโดยใช้วิธีนี้

ไปที่ไฟล์ CSS ของคุณและปรับขนาดภาพของคุณทั้งหมดดังนี้

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