answer
636
Bạn Đang Xem: Chỉnh kích thước ảnh trong css
img {
display: block;
max-width:230px;
max-height:95px;
width: auto;
height: auto;
}<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">Điều này sẽ làm thu nhỏ hình ảnh nếu nó quá lớn đối với khu vực được chỉ định (vì nhược điểm, nó sẽ không phóng to hình ảnh).
636 hữu ích 5 bình luận chia sẻ
answer
188
Các giải pháp dưới đây sẽ cho phép thu nhỏ và thu nhỏ hình ảnh , tùy thuộc vào chiều rộng của hộp cha.
Tất cả các hình ảnh có một thùng chứa cha mẹ với
chiều rộng cố định chỉ cho mục đích trình diễn . Trong sản xuất, đây sẽ là chiều rộng của hộp cha.
Thực hành tốt nhất (2018):
Giải pháp này yêu cầu trình duyệt hiển thị hình ảnh với chiều rộng tối đa có sẵn và điều chỉnh chiều cao theo tỷ lệ phần trăm của chiều rộng đó.
.parent {
width: 100px;
}
img {
display: block;
width: 100%;
height: auto;
}<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<div class="parent">
<img width="400" height="400" src="https://placehold.it/400x400">
</div>Giải pháp Fancier:
Với giải pháp fancier, bạn sẽ có thể cắt hình ảnh bất kể kích thước của nó và thêm màu nền để bù cho việc cắt xén.
.parent {
width: 100px;
}
.container {
display: block;
width: 100%;
height: auto;
position: relative;
overflow: hidden;
padding: 34.37% 0 0 0; /* 34.37% = 100 / (w / h) = 100 / (640 / 220) */
}
.container img {
display: block;
max-width: 100%;
max-height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}<p>This image is originally 640x220, but should get resized by the CSS:</p>
<div class="parent">
<div class="container">
<img width="640" height="220" src="https://placehold.it/640x220">
</div>
</div>Đối với phần đệm chỉ định dòng, bạn cần tính tỷ lệ khung hình của hình ảnh, ví dụ:
640px (w) = 100%
220px (h) = ?
640/220 = 2.909
100/2.909 = 34.37%Vì vậy, đệm hàng đầu =
34,37%.
188 hữu ích 5 bình luận chia sẻ
answer
165
Tôi đã đấu tranh với vấn đề này khá khó khăn, và cuối cùng đã đi đến giải pháp đơn giản này:
object-fit: cover;
width: 100%;
height: 250px;Bạn có thể điều chỉnh chiều rộng và chiều cao để phù hợp với nhu cầu của mình và thuộc tính phù hợp
với đối tượng sẽ thực hiện việc cắt xén cho bạn.
Chúc mừng.
165 hữu ích 5 bình luận
chia sẻ
answer
59
Thuộc tính kích thước nền chỉ có nghĩa là> = 9, nhưng nếu điều đó tốt với bạn, bạn có thể sử dụng div với background-imagevà đặt
background-size: contain:
div.image{
background-image: url("your/url/here");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}Bây giờ bạn chỉ có thể đặt kích thước div của mình thành bất cứ điều gì bạn muốn và không chỉ hình ảnh sẽ giữ tỷ lệ khung hình của nó, nó cũng sẽ được tập trung cả theo chiều dọc và chiều ngang trong div. Chỉ cần đừng quên đặt kích thước trên css vì div không có thuộc tính width / height trên thẻ.
Cách tiếp cận này khác với câu trả lời của setecs,
sử dụng vùng này sẽ không đổi và được xác định bởi bạn (để lại các khoảng trống theo chiều ngang hoặc chiều dọc tùy thuộc vào kích thước div và tỷ lệ khung hình của hình ảnh), trong khi câu trả lời setecs sẽ giúp bạn có một hộp chính xác kích thước của hình ảnh tỷ lệ (không có khoảng trống).
Chỉnh sửa: Theo tài liệu kích
thước nền MDN, bạn có thể mô phỏng thuộc tính kích thước nền trong IE8 bằng cách sử dụng khai báo bộ lọc độc quyền:
Mặc dù Internet Explorer 8 không hỗ trợ thuộc tính kích thước nền, nhưng có thể mô phỏng một số chức năng của nó bằng chức năng bộ lọc -ms không chuẩn:
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";59 hữu ích 4 bình luận chia sẻ
answer
27
Xem Thêm : Tham Khảo 4 cách lập trình game bằng scratch tốt nhất, bạn nên biết
Rất giống với một số câu trả lời ở đây, nhưng trong trường hợp của tôi, tôi đã có những hình ảnh đôi khi cao hơn, đôi khi lớn hơn.
Phong cách này hoạt động như một nét quyến rũ để đảm bảo rằng tất cả
các hình ảnh đều sử dụng tất cả không gian có sẵn, giữ nguyên tỷ lệ và không cắt giảm:
.img {
object-fit: contain;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
} 27 hữu ích 2 bình luận
chia sẻ
answer
16
Xóa thuộc tính “chiều cao”.
<img src="big_image.jpg" width="900" alt=""/>Bằng cách chỉ định cả hai bạn đang thay đổi tỷ lệ khung hình của hình ảnh. Chỉ cần đặt một cái sẽ thay đổi
kích thước nhưng giữ nguyên tỷ lệ khung hình.
Tùy chọn, để hạn chế quá khổ:
<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/> 16 hữu ích 4 bình luận
chia sẻ
answer
10
Chỉ cần thêm nó vào css của bạn, Nó sẽ tự động thu nhỏ và mở rộng với việc giữ nguyên tỷ lệ ban đầu.
img {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}10 hữu ích 3 bình luận chia sẻ
answer
7
Không có cách nào tiêu chuẩn để duy trì tỉ lệ cho hình ảnh với width, heightvà max-widthquy định với nhau.
Vì vậy,
chúng tôi buộc phải chỉ định widthvà heightđể ngăn trang Jumps nhảy trong khi tải hình ảnh, hoặc sử dụng max-widthvà không chỉ định kích thước cho hình ảnh.
Việc chỉ định width(không có height) thường không có nhiều ý nghĩa, nhưng bạn có thể cố gắng ghi đè heightthuộc tính HTML bằng cách thêm quy tắc
như IMG {height: auto; }vào biểu định kiểu của bạn.
Xem thêm lỗi Firefox liên quan 392261 .
7 hữu ích 3 bình luận chia sẻ
answer
5
Đặt lớp CSS của thẻ chứa hình ảnh của bạn thành image-class:
<div class="image-full"></div>và thêm cái này cho bạn bản định kiểu CSS của bạn.
.image-full {
background: url(...some image...) no-repeat;
background-size: cover;
background-position: center center;
}5 hữu ích 0 bình luận chia sẻ
answer
5
Để duy trì hình ảnh phản hồi trong khi vẫn thực thi hình ảnh phải có tỷ lệ khung hình nhất định, bạn có thể làm như sau:
HTML:
<div class="ratio2-1">
<img src="../image.png" alt="image">
</div>Và SCSS:
.ratio2-1 {
overflow: hidden;
position: relative;
&:before {
content: '';
display: block;
padding-top: 50%; // ratio 2:1
}
img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
}Điều này có thể được sử dụng để thực thi một tỷ lệ khung hình nhất định, bất kể kích thước của hình ảnh mà tác giả tải lên.
Cảm ơn @Koseso tại http://codepen.io/Koseso/pen/bfdhg . Kiểm tra URL này để biết thêm tỷ lệ và một ví dụ hoạt động.
Xem Thêm : Download đề thi toefl primary
5 hữu ích 1 bình luận chia sẻ
answer
5
https://jsfiddle.net/sot2qgj6/3/
Dưới đây là câu trả lời nếu bạn muốn đặt hình ảnh với
tỷ lệ phần trăm chiều rộng cố định , nhưng không phải là pixel chiều rộng cố định .
Và điều này sẽ hữu ích khi xử lý kích thước màn hình khác nhau .
Thủ đoạn là
- Sử
dụngpadding-topđể đặt chiều cao từ chiều rộng. - Sử dụng
position: absoluteđể đặt hình ảnh trong không gian đệm. - Sử dụng
max-height and max-widthđể đảm bảo hình ảnh sẽ không qua phần tử cha. - sử dụng
display:block and margin: autođể căn giữa hình ảnh.
Tôi cũng đã nhận xét hầu hết các thủ thuật bên trong
fiddle.
Tôi cũng tìm thấy một số cách khác để thực hiện điều này. Sẽ không có hình ảnh thực trong html, vì vậy tôi cá nhân trả lời câu trả lời hàng đầu khi tôi cần phần tử “img” trong html.
css đơn giản bằng cách sử dụng nền
http://jsfiddle.net/4660s79h/2/
hình nền với từ trên đầu http://jsfiddle.net/4660s79h/1/
Khái niệm sử dụng vị trí tuyệt đối là từ đây
http://www.w3schools.com/howto/howto_css_aspect_ratio.asp
5 hữu ích
0 bình luận chia sẻ
answer
4
Để buộc hình ảnh phù hợp với kích thước chính xác, bạn không cần phải viết
quá nhiều mã. Nó rất đơn giản
img{
width: 200px;
height: auto;
object-fit: contain; /* Fit logo in the image size */
-o-object-fit: contain; /* Fit logo fro opera browser */
object-position: top; /* Set logo position */
-o-object-position: top; /* Logo position for opera browser */
}<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png" alt="Logo"> 4 hữu ích 0 bình luận
chia sẻ
answer
2
Bạn có thể tạo một div như thế này:
<div class="image" style="background-image:url('/to/your/image')"></div>Và sử dụng css này để tạo kiểu cho nó:
height: 100%;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain; // this can also be cover2 hữu ích 3 bình luận chia sẻ
answer
2
Bạn có thể sử dụng điều này:
img {
width: 500px;
height: 600px;
object-fit: contain;
position: relative;
top: 50%;
transform: translateY(-50%);
}2 hữu ích 0 bình luận chia sẻ
answer
1
Điều này sẽ làm thu nhỏ hình ảnh nếu nó quá lớn đối với khu vực được chỉ định (vì nhược điểm, nó sẽ không phóng to hình ảnh).
Giải pháp của setec là tốt cho “Shrink to Fit” ở chế độ tự động.
Nhưng, để tối ưu MỞ RỘNG để phù hợp với chế độ ‘tự động’, trước tiên bạn cần đặt hình ảnh nhận được vào id tạm thời, Kiểm tra xem nó có thể được mở rộng về chiều cao hoặc chiều rộng hay không (tùy theo tỷ lệ khung hình của nó v / s tỷ lệ khung hình của khối hiển thị của bạn),
$(".temp_image").attr("src","str.jpg" ).load(function() {
// callback to get actual size of received image
// define to expand image in Height
if(($(".temp_image").height() / $(".temp_image").width()) > display_aspect_ratio ) {
$(".image").css('height', max_height_of_box);
$(".image").css('width',' auto');
} else {
// define to expand image in Width
$(".image").css('width' ,max_width_of_box);
$(".image").css('height','auto');
}
//Finally put the image to Completely Fill the display area while maintaining aspect ratio.
$(".image").attr("src","str.jpg");
});Cách tiếp cận này hữu ích khi hình ảnh nhận được nhỏ hơn hộp hiển thị. Bạn phải lưu chúng trên máy chủ của mình ở kích thước Nhỏ ban đầu thay vì phiên bản mở
rộng của chúng để lấp đầy Hộp hiển thị lớn hơn của bạn để tiết kiệm kích thước và băng thông.
1 hữu ích 1 bình luận
chia sẻ
answer
0
img {
max-width: 80px; /* Also works with percentage value like 100% */
height: auto;
}<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="https://i.stack.imgur.com/aEEkn.png">
<p>Let's say the author of the HTML deliberately wants
the height to be half the value of the width,
this CSS will ignore the HTML author's wishes, which may or may not be what you want:
</p>
<img width="400" height="200" src="https://i.stack.imgur.com/aEEkn.png">0 hữu ích 0 bình luận chia sẻ
Nguồn: https://quatangtiny.com
Danh mục: Blog
