Làm cách nào để đặt chiều rộng và chiều cao của hình ảnh mà không bị kéo giãn?

Nếu tôi có:

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

sau đó

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

sẽ căng ra để lấp đầy khoảng trống đó. Tôi muốn hình ảnh giữ nguyên kích thước nhưng để hình ảnh chiếm nhiều dung lượng trong DOM. Tôi có phải thêm một đóng gói <div>hay <span>không? Tôi ghét thêm đánh dấu để tạo kiểu.

Có, bạn cần một div đóng gói:

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

với một cái gì đó như:

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

Các giải pháp khác (đệm, lề) tẻ nhạt hơn (ở chỗ bạn cần tính toán đúng giá trị dựa trên kích thước của hình ảnh) nhưng cũng không cho phép vùng chứa nhỏ hơn hình ảnh một cách hiệu quả.

Ngoài ra, ở trên có thể được điều chỉnh dễ dàng hơn nhiều cho các bố cục khác nhau. Ví dụ: nếu bạn muốn hình ảnh ở dưới cùng bên phải:

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

Câu trả lời năm 2017

Đối tượng CSS phù hợp hoạt động trong tất cả các trình duyệt hiện tại. Nó cho phép imgphần tử lớn hơn mà không làm giãn hình ảnh.

Bạn có thể thêm object-fit: cover;vào CSS của mình.

Tải hình ảnh làm nền cho một div.

Thay vì:

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

làm

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

Tất cả các trình duyệt sẽ cắt phần hình ảnh không vừa.
Điều này có một số lợi thế so với việc bao bọc nó một phần tử có phần tràn bị ẩn:

1. Không có thêm đánh dấu. Div chỉ thay thế img.
2. Dễ dàng căn giữa hoặc đặt hình ảnh sang độ lệch khác. ví dụ.url(pic) center top;
3. Lặp lại hình ảnh khi đủ nhỏ. (OK, không hiểu tại sao bạn lại muốn điều đó)
4. Đặt màu bg trong cùng một câu lệnh, dễ dàng áp dụng cùng một hình ảnh cho nhiều phần tử và mọi thứ áp dụng cho hình ảnh bg.

Cập nhật: Câu trả lời này có từ trước object-fit; bây giờ bạn có thể nên sử dụng object-fit / object-position.

Nó vẫn hữu ích cho các trình duyệt cũ hơn, cho các thuộc tính bổ sung (chẳng hạn như lặp lại nền) và cho các trường hợp cạnh (Ví dụ: giải pháp khắc phục lỗi Chrome với flexbox và object-position và các vấn đề của FF (trước đây?) Với lưới + autoheight + object- vừa vặn. Các div bao bọc trong lưới / hộp uốn thường cho ... kết quả không trực quan.)

CSS3 object-fit

Tôi không chắc nó đã được triển khai bởi webkit, IE và firefox đến đâu. Nhưng Opera hoạt động như một phép thuật

object-fithoạt động với nội dung SVG, nhưng cũng có thể đạt được hiệu quả tương tự bằng cách đặt preserveAspectRatio=""thuộc tính trong chính SVG.

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

Bản demo của Chris Mills tại đây 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;
}

Tạo một div và cho nó một lớp. Sau đó, thả một img vào đó.

<div class="mydiv">

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

</div>

Đặt kích thước của div của bạn và làm cho nó tương đối.

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

sau đó tạo kiểu cho hình ảnh của bạn

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

Hy vọng điều đó sẽ giúp

Bạn có thể sử dụng như sau:

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

Tôi có phải thêm <div> hay <span> đóng gói không?

Tôi nghĩ bạn làm. Điều duy nhất nghĩ đến là phần đệm, nhưng để làm được điều đó, bạn phải biết trước kích thước của hình ảnh.

bạn có thể thử đặt phần đệm thay vì chiều cao / chiều rộng.

Những gì tôi có thể nghĩ đến là kéo dài chiều rộng hoặc chiều cao và để nó thay đổi kích thước theo tỷ lệ-khía cạnh. Sẽ có một số khoảng trắng ở hai bên. Một cái gì đó như cách màn hình Rộng hiển thị độ phân giải 1024x768.

Nếu sử dụng flexbox là một lựa chọn hợp lệ cho bạn (không cần tải các trình duyệt cũ), hãy kiểm tra câu trả lời khác của tôi tại đây (có thể là một bản sao của câu này):

Về cơ bản, bạn cần phải bọc thẻ img của mình trong một div và css của bạn sẽ giống như sau:

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

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

Đây là một câu hỏi khá cũ, nhưng tôi đã gặp phải vấn đề khó chịu chính xác là mọi thứ hoạt động tốt cho Chrome / Edge (với thuộc tính phù hợp với đối tượng) nhưng cùng một thuộc tính css không hoạt động trong IE11 (vì nó không được hỗ trợ trong IE11), tôi đã kết thúc sử dụng phần tử "figure" HTML5 đã giải quyết được tất cả các vấn đề của tôi.

Cá nhân tôi đã không sử dụng thẻ DIV bên ngoài vì điều đó không giúp ích gì trong trường hợp của tôi, vì vậy tôi đã tránh DIV bên ngoài và chỉ cần thay thế bằng phần tử 'figure'.

Đoạn mã dưới đây buộc hình ảnh phải giảm / thu nhỏ tỷ lệ một cách độc đáo (mà không thay đổi tỷ lệ khung hình ban đầu).

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

và các lớp css:

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

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