วิธีตั้งค่าความกว้างและความสูงของรูปภาพโดยไม่ยืดออก

ถ้าฉันมี:

#logo {
    width: 400px;
    height: 200px;
}

แล้ว

<img id="logo" src="logo.jpg"/>

จะยืดออกไปจนเต็มช่องว่างนั้น ฉันต้องการให้รูปภาพมีขนาดเท่าเดิม แต่ต้องใช้พื้นที่ใน DOM มากขนาดนั้น ฉันต้องเพิ่มการห่อหุ้ม<div>หรือ<span>? ฉันเกลียดการเพิ่มมาร์กอัปสำหรับการจัดแต่งทรงผม

ใช่คุณต้องการ div ที่ห่อหุ้ม:

<div id="logo"><img src="logo.jpg"></div>

ด้วยสิ่งที่ชอบ:

#logo { height: 100px; width: 200px; overflow: hidden; }

วิธีแก้ปัญหาอื่น ๆ (ช่องว่างภายในระยะขอบ) น่าเบื่อกว่า (ซึ่งคุณต้องคำนวณค่าที่เหมาะสมตามขนาดของรูปภาพ) แต่ก็ไม่อนุญาตให้คอนเทนเนอร์มีขนาดเล็กกว่ารูปภาพอย่างมีประสิทธิภาพ

นอกจากนี้ข้างต้นยังสามารถปรับให้เข้ากับเลย์เอาต์ต่างๆได้ง่ายขึ้น ตัวอย่างเช่นหากคุณต้องการภาพที่ด้านล่างขวา:

#logo { position: relative; height: 100px; width: 200px; }
#logo img { position: absolute; right: 0; bottom: 0; }

คำตอบ 2017

CSS object fitทำงานได้ในทุกเบราว์เซอร์ปัจจุบัน ช่วยให้imgองค์ประกอบมีขนาดใหญ่ขึ้นโดยไม่ต้องยืดภาพ

คุณสามารถเพิ่มลงobject-fit: cover;ใน CSS ของคุณ

โหลดภาพเป็นพื้นหลังสำหรับ div

แทน:

<img id='logo' src='picture.jpg'>

ทำ

<div id='logo' style='background:url(picture.jpg)'></div>

เบราว์เซอร์ทั้งหมดจะครอบตัดส่วนของรูปภาพที่ไม่พอดี
สิ่งนี้มีข้อดีหลายประการในการห่อองค์ประกอบที่มีส่วนเกินซ่อนอยู่:

1. ไม่มีมาร์กอัปพิเศษ div เพียงแค่แทนที่ img
2. จัดกึ่งกลางหรือตั้งค่ารูปภาพเป็นออฟเซ็ตอื่นได้อย่างง่ายดาย เช่น.url(pic) center top;
3. ทำซ้ำภาพเมื่อมีขนาดเล็กพอ (ตกลงไม่รู้ทำไมคุณถึงต้องการแบบนั้น)
4. กำหนดสี bg ในคำสั่งเดียวกันนำภาพเดียวกันไปใช้กับหลายองค์ประกอบได้อย่างง่ายดายและทุกอย่างที่ใช้กับภาพ bg

อัปเดต: คำตอบนี้มาจากก่อนวัตถุพอดี ตอนนี้คุณควรใช้ object-fit / object-position

ยังคงมีประโยชน์สำหรับเบราว์เซอร์รุ่นเก่าสำหรับคุณสมบัติพิเศษ (เช่นการทำซ้ำพื้นหลัง) และสำหรับกรณีขอบ (ตัวอย่างเช่นแก้ไขข้อบกพร่องของ Chrome ที่มี flexbox และตำแหน่งวัตถุและ FF (เดิม?) ปัญหากับเส้นกริด + ความสูงอัตโนมัติ + วัตถุ - พอดี. Wrapper divs ในกริด / เฟล็กบ็อกซ์มักให้ ... ผลลัพธ์ที่ไม่ใช้งานง่าย)

CSS3 พอดีกับวัตถุ

ฉันไม่แน่ใจว่า webkit, IE และ firefox ใช้งานได้ไกลแค่ไหน แต่ Opera ทำงานเหมือนเวทมนตร์

object-fitใช้งานได้กับเนื้อหา SVG แต่ผลเช่นเดียวกันสามารถทำได้โดยการตั้งค่าpreserveAspectRatio=""แอตทริบิวต์ใน SVG เอง

img {
  height: 100px;
  width: 100px;
  -o-object-fit: contain;
}

Chris Mills สาธิตได้ที่นี่http://dev.opera.com/articles/view/css3-object-fit-object-position/

#logo {
    width: 400px;
    height: 200px;

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

สร้าง Div และให้คลาส จากนั้นวางภาพลงในนั้น

<div class="mydiv">

<img src="location/of/your/image" ></img>

</div>

กำหนดขนาดของ div ของคุณและกำหนดให้สัมพันธ์กัน

    .mydiv {
        position: relative;
        height:300px;
        width: 100%;
        overflow: hidden;
    }

จากนั้นจัดรูปแบบภาพของคุณ

img {
    width: 100%;
    height: auto;
    overflow: hidden;
}

หวังว่าจะช่วยได้

คุณสามารถใช้ดังต่อไปนี้:

.width100 {
  max-width: 100px;
  height: 100px;
  width: auto;
  border: solid red;
}

<img src="https://www.gravatar.com/avatar/dc48e9b92e4210d7a3131b3ef46eb8b1?s=512&d=identicon&r=PG" class="width100" />

ฉันต้องเพิ่ม <div> หรือ <span> ที่ห่อหุ้ม?

ฉันคิดว่าคุณทำ สิ่งเดียวที่อยู่ในใจคือการเว้นระยะห่าง แต่สำหรับสิ่งนั้นคุณจะต้องทราบขนาดของภาพก่อน

คุณสามารถลองตั้งค่าช่องว่างภายในแทนความสูง / ความกว้าง

สิ่งที่ฉันคิดได้คือยืดความกว้างหรือความสูงและปล่อยให้มันปรับขนาดตามอัตราส่วน จะมีพื้นที่สีขาวบางด้าน บางอย่างเช่นวิธีที่หน้าจอกว้างแสดงความละเอียด 1024x768

หากการใช้ flexbox เป็นตัวเลือกที่ถูกต้องสำหรับคุณ (ไม่จำเป็นต้อง suport เบราว์เซอร์เก่า) ให้ตรวจสอบคำตอบอื่นของฉันที่นี่ (ซึ่งอาจซ้ำกับข้อนี้):

โดยทั่วไปคุณจะต้องปิดแท็ก img ของคุณใน div และ css ของคุณจะมีลักษณะดังนี้:

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

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

นี่เป็นคำถามที่ค่อนข้างเก่า แต่ฉันมีปัญหาที่น่ารำคาญเหมือนกันโดยที่ทุกอย่างทำงานได้ดีสำหรับ Chrome / Edge (พร้อมคุณสมบัติที่พอดีกับวัตถุ) แต่คุณสมบัติ css เดียวกันไม่ทำงานใน IE11 (เนื่องจากไม่รองรับใน IE11) ฉันก็จบลง โดยใช้องค์ประกอบ "รูป" HTML5 ซึ่งแก้ปัญหาทั้งหมดของฉัน

โดยส่วนตัวฉันไม่ได้ใช้แท็ก DIV ด้านนอกเนื่องจากไม่ได้ช่วยอะไรเลยในกรณีของฉันดังนั้นฉันจึงหลีกเลี่ยง DIV ด้านนอกและแทนที่ด้วยองค์ประกอบ 'figure'

รหัสด้านล่างบังคับให้รูปภาพลด / ลดขนาดลงอย่างดี (โดยไม่เปลี่ยนอัตราส่วนภาพต้นฉบับ)

<figure class="figure-class">
  <img class="image-class" src="{{photoURL}}" />
</figure>

และคลาส css:

.image-class {
    border: 6px solid #E8E8E8;
    max-width: 189px;
    max-height: 189px;
}

.figure-class {
    width: 189px;
    height: 189px;
}