Tôi làm cách nào để thay đổi kích thước hình ảnh mà không kéo dài?

Question

Tôi muốn có một <img> có chiều rộng là 40% của trang và nó được kéo dài.

Làm cách nào tôi có thể thay đổi kích thước mà không kéo dài?

Ví dụ, nếu tôi có một hình ảnh mà tập tin ban đầu trông như thế này:

____8888________ 
____8888________ 
____8888________ 

Trong trang web của tôi, bình thường thì nên trông giống như:

____8888________ 
____8888________ 
____8888________ 

Ngay sau khi tôi làm cho trình duyệt hơi hẹp hơn một chút, max-width (giả sử 10 ký tự trong ví dụ này) sẽ có hiệu lực.
Khi điều đó xảy ra, tôi muốn nó là:

____8888__ 
____8888__ 
____8888__ 

(. Giống như nó được cắt từ phía bên phải Dĩ nhiên từ hai phía là tốt hơn),
Thay vì:

__888_____ 
__888_____ 
__888_____ 

• Bất kỳ mẹo nào (đặt nó vào nền <div>) đều ổn.
• Chiều rộng và chiều cao không xác định.
• Cảm ơn tất cả các câu trả lời trước của bạn, nhưng, xin lỗi, tôi nghĩ tôi chưa nhấn mạnh đủ "Sau khi giới hạn chiều rộng của nó đến 40% trang", có nghĩa là trước khi giới hạn chiều rộng .

Answer 1

Bí quyết là đưa hình ảnh vào phần tử khối chứa, ví dụ như DIV. Khi bên trong thiết lập chiều rộng của hình ảnh thành 100%, điều này sẽ hướng dẫn trình duyệt để phù hợp với chiều rộng hình ảnh tuôn ra với các cạnh trái và phải của DIV.

Sau đó, bạn kiểm soát chiều rộng của DIV qua CSS, tôi thấy việc giữ hình ảnh trong phần tử khối giúp thao tác dễ dàng hơn nhiều khi tạo bố cục chất lỏng.

Ví dụ:

img.stretchy { 
 
width: 100%; /*Tells image to fit to width of parent container*/ 
 
} 
 
.container { 
 
width: 33%; /*Use this to control width of the parent container, hence the image*/ 
 
}

<div class="container"> 
 
    <img src="http://i.stack.imgur.com/fv6Ib.jpg" alt="Beach Scene" class="stretchy" /> 
 
</div>

Nếu bạn wan hình ảnh được cắt bớt/cắt bằng mọi cách, đặt nó vào được lớn hơn đó là cha mẹ, và thiết lập tràn css của cha mẹ để ẩn .

Ví dụ:

img.clipped { 
 
    width: 150%; /*Scales image to 150% width of parent container*/ 
 
    float: left; /*Floats image to left of container - clipping right hand side*/ 
 
    float: right; /*Floats image to right of container - clipping left hand side*/ 
 
} 
 
.container { 
 
    width: 33%; /*Use this to control width of the parent container, hence the image*/ 
 
    overflow: hidden; 
 
}

<div class="container"> 
 
    <img src="http://i.stack.imgur.com/fv6Ib.jpg" alt="Beach Scene" class="clipped" /> 
 
</div>

Hope this helps ...

Answer 2

Bạn có nghĩa là cắt xén hình ảnh không? Nếu vậy hãy xem xét thuộc tính tràn CSS. Ngoài ra, bạn có thể đặt nó vào nền và căn giữa nó trong div

Answer 3

Dưới đây là một vài lựa chọn.(xem bản trình diễn của tất cả các tùy chọn này tại đây: http://jsfiddle.net/Squeegy/Gcrdu/)

Hình ảnh đầu tiên dưới dạng đồng bằng có kích thước không xác định. Điều này hiển thị ở bất kỳ kích thước nào nó xảy ra.

<img src="http://www.google.com/logos/classicplus.png"> 

Nhưng khi nó quay ra, bạn có thể giữ nguyên tỷ lệ cỡ ảnh nếu bạn chỉ đặt chiều rộng hoặc chỉ chiều cao. Kích thước khác sẽ tự điều chỉnh để giữ cho mọi thứ không bị giãn ra.

// HTML 
<img src="http://www.google.co.jp/logos/classicplus.png" class="aspectshrink"> 

// CSS 
img.aspectshrink { 
    width: 100px; 
} 

Nhưng khi bạn sử dụng hình nền CSS, bạn có thể thực hiện cắt xén quảng cáo dựa trên vị trí neo nền.

này nói "Go"

// HTML 
<div class="cropped-right"></div> 

// CSS 
.cropped-right { 
    width: 100px; 
    height: 100px; 
    background: url(http://www.google.com/logos/classicplus.png); 
    background-position: left center; 
    background-repeat: no-repeat; 
    border: 1px solid red; 
} 

Và điều này nói "gle":

// HTML 
<div class="cropped-left"></div> 

// CSS 
.cropped-left { 
    width: 100px; 
    height: 100px; 
    background: url(http://www.google.com/logos/classicplus.png); 
    background-position: right center; 
    background-repeat: no-repeat; 
    border: 1px solid red; 
}; 

Answer 4

Cố gắng sử dụng ImageResizer. Đây là liên kết: http://imageresizing.net/

Answer 5

Thêm lớp này cho thẻ img html, nó sẽ giữ hình ảnh như nó có, nhưng sẽ mất không gian quy định cần thiết ie.40% x 40% mà không kéo dài hình ảnh

.img{ 
    width:40%; 
    height:40%; //change to whatever your choice 

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