Hướng dẫn resize ảnh trong css

Mình xin được giải đáp thắc mắc cho bạn có nick name Facbook là Nguyễn Duy Kiệt trên Group của diễn đàn WMP. Nguyên văn câu hỏi của bạn Kiệt như sau:

"Ad cho em hoi em up san pham ra ma luc ra index no khong tu can size anh bang nhau dan đến tình trạng chiều cao các sản phẩm không giống nhau các khung nó lên xuống nhìn k đẹp mắt vậy fix kiểu gì ạ".

Một lời khuyên dành cho bạn Kiệt là nên sử dụng tiếng Việt có dấu hoặc viết nguyên văn câu bằng tiếng Anh cho mọi người dễ theo dõi nhé, chứ nửa nạc nữa mỡ vậy đến chị Google còn chào thua ấy chứ. Giỡn thôi giờ mình vào nội dung chính nhé ^^.

Hướng dẫn resize ảnh không làm ảnh hưởng đến tỉ lệ

Như bạn đã biết, hình thì có chiều cao và chiều rộng cố định nên khi bạn điều chỉnh chiều rộng mà không điều chỉnh chiều cao thì ảnh sẽ bị bóp méo so với ảnh gốc và ngược lại.

Để khắc phục thì các trang web hiện nay áp dụng phương pháp đặt chiều cao tối đa cho hình ảnh, nếu một ảnh vượt quá kích thước chiều cao được quy định thì phần vượt mức đó sẽ bị ẩn đi, do người quản trị web sử dụng thuộc tính overflow:hidden của CSS3.

Cụ thể là như thế này:

Đặt max-height: ...px cho class chứa ảnh. Trong đó bạn thay chỗ "..." bằng một con số mà bạn cảm thấy hợp lý so với tỉ lệ của hình ảnh mà bạn đưa lên website. Ví dụ:

max-height: 150px;

Sau đó trong cùng class đó bạn thêm thuộc tính overflow:hidden.

overflow:hidden;

Thực chất của phương pháp này là bạn đặt chiều cao tối đa cho thẻ div chứa ảnh, nội dung nào vượt quá kích thước của thẻ div thì sẽ bị ẩn đi. Không chỉ được áp dụng đối với hình ảnh không đâu, bạn có thể sử dụng cho text hoặc bất kỳ nội dung nào.

Để bạn dễ hình dung mình sẽ làm ví dụ cụ thể luôn:

Ở trên là hình ảnh chưa được xử lý bằng CSS. Bạn thấy nó không đồng nhất tỷ lệ đúng không nào, tấm thì cao còn tấm thì thấp làm bố cục không được đẹp.

Ở WMP thì tất cả ảnh ở bố cục trang danh sách sản phẩm thì đều thuộc class .anh, do vậy bạn chỉ cần thêm đoạn code này vào phần nhập CSS là được:

.sanpham_box .anh{max-height:150px; overflow:hidden;}

Tại sao mình thêm .sanpham_box ở trước nữa, là vì class .anh nằm trong thẻ div cha của nó là .sanpham_box, làm như vậy nó sẽ áp dụng luôn cho tất cả các trang nào có bố cục là trang danh sách sản phẩm và tránh bị xung đột với các thẻ chứa class .anh mà không phải là trang danh sách sản phẩm.

Ở hình trên bạn có thấy trong class="anh" sẽ chứa thẻ không? Đó chính là thẻ cha chứa hình ảnh sản phẩm ở bố cục của WMP đấy. Nếu bạn muốn áp dụng cho các thẻ div khác thì cứ xác định thẻ cha chứa nó rồi thêm đoạn code như ở trên là được nhé.

Bạn nhớ thay chỗ 150px tương xứng với kích thước mà ảnh của bạn được hiển thị nhé.

Đây là hình ảnh sau khi đã thêm đoạn code ở trên vào phần tự nhập CSS:

Sau khi làm xong hướng dẫn bạn quay trở lại website của mình xem đã resize được như ý muốn chưa nhé. Ưu điểm của phương pháp này là không làm mất đi tỉ lệ kích thước của ảnh, còn nhược điểm là phần ảnh nằm ngoài thẻ cha chứa nó sẽ bị ẩn đi.

Nhưng vậy là hay rồi, phương pháp này được rất nhiều website hiện nay sử dụng nên bạn cứ yên tâm nhé!

Còn một cách khác nữa là: nếu bạn muốn hình ảnh khi upload lên website được đẹp nhất thì nên đồng bộ về tỉ lệ trước khi thực hiện thêm sản phẩm. Cách này thì tốn thời gian và "cùi bắp" hơn nhưng cái gì tự tay mình làm thì sẽ đẹp hơn và thích thú hơn phải không nào.

Nếu có thắc mắc cần được hỗ trợ xin bạn comment ở Group của WMP giúp mình.

Nguồn: Web7b

Bài trước: Làm sao để website được Google index nhanh?

Có cách nào để thay đổi kích thước (giảm tỷ lệ) hình ảnh theo tỷ lệ bằng CHỈ CSS không?

Tôi đang thực hiện theo cách JavaScript, nhưng chỉ đang thử xem liệu điều này có khả thi với CSS không.

• html
• css
• image-resizing

630 hữu ích 3 bình luận 1.3m xem chia sẻ

answer

729

Để thay đổi kích thước hình ảnh theo tỷ lệ bằng CSS:

img.resize {
    width:540px; /* you can use % */
    height: auto;
}

729 hữu ích 5 bình luận chia sẻ

answer

206

Kiểm soát kích thước và duy trì tỷ lệ:

#your-img {
    height: auto; 
    width: auto; 
    max-width: 300px; 
    max-height: 300px;
}

206 hữu ích 4 bình luận chia sẻ

answer

105

Nếu đó là hình nền, hãy sử dụng kích thước nền: chứa.

Ví dụ css:

#your-div {
  background: url('image.jpg') no-repeat;
  background-size:contain;
}

105 hữu ích 4 bình luận chia sẻ

answer

69

Thử

transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-webkit-transform: scale(0.5, 0.5);

69 hữu ích 5 bình luận chia sẻ

answer

48

Lưu ý rằng width:50%sẽ thay đổi kích thước của nó thành 50% không gian có sẵn cho hình ảnh, trong khi max-width:50%sẽ thay đổi kích thước hình ảnh thành 50% kích thước tự nhiên của nó . Điều này rất quan trọng để tính đến khi sử dụng quy tắc này cho thiết kế web di động, vì vậy đối với thiết kế web di động max-widthphải luôn được sử dụng.

48 hữu ích 4 bình luận chia sẻ

answer

45

Để chia tỷ lệ hình ảnh bằng cách giữ tỷ lệ khung hình của nó

Thử đi,

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

45 hữu ích 0 bình luận chia sẻ

answer

39

Bạn có thể sử dụng thuộc tính phù hợp với đối tượng :

.my-image {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

Điều này sẽ phù hợp với hình ảnh, mà không thay đổi tỷ lệ.

39 hữu ích 4 bình luận chia sẻ

answer

30

Xem lại vào năm 2015:

Các thuộc tính css chiều rộng tối đa và chiều cao tối đa hoạt động rất tốt , nhưng không được IE6 hỗ trợ
và tôi tin IE7. Bạn sẽ muốn sử dụng chiều cao / chiều rộng này để không vô tình tăng tỷ lệ hình ảnh lên. Bạn sẽ chỉ muốn giới hạn chiều cao / chiều rộng tối đa tương ứng.
 23 hữu ích  
3 bình luận   chia sẻ 
answer
22
Sử dụng kỹ thuật mở rộng dễ dàng này 
img {
    max-width: 100%;
    height: auto;
}
@media {
  img { 
    width: auto; /* for ie 8 */
  }
}
 13 hữu ích   0 bình luận   chia sẻ 
answer 
11
img{
    max-width:100%;
    object-fit: scale-down;
}
làm việc cho tôi Nó thu nhỏ hình ảnh lớn hơn để vừa trong hộp, nhưng để lại hình ảnh nhỏ hơn kích thước ban đầu của chúng.

11 hữu ích   0 bình luận   chia sẻ 
answer 
4



img {
    max-width:100%;
}

div {
    width:100px;
}
với đoạn mã này, bạn có thể thực hiện theo cách hiệu quả hơn
 4 hữu ích   0 bình luận   chia sẻ 
answer 
4
Chúng ta có thể thay đổi kích thước hình ảnh bằng CSS trong trình duyệt bằng các truy vấn phương tiện và nguyên tắc thiết kế đáp ứng.
    @media screen and (orientation: portrait) {
img.ri {
    max-width: 80%;
  }
}
@media screen and (orientation: landscape) {
  img.ri { max-height: 80%; }
}
 4 hữu ích   0 bình luận   chia sẻ 
answer 
4
Tôi tin rằng đây là cách dễ nhất để làm điều đó, cũng có thể sử dụng thông qua stylethuộc tính nội tuyến trong 
Bạn luôn cần một cái gì đó như thế này
html
{
    width: 100%;
    height: 100%;
}
ở đầu tập tin css của bạn
 2 hữu ích   1 bình luận   chia sẻ 
answer 
2
Thử đi:
div.container {
    max-width: 200px;//real picture size
    max-height: 100px;
}

/* resize images */
div.container img {
    width: 100%;
    height: auto;
}
 2 hữu ích   0 bình luận   chia sẻ 
Đăng nhập để trả lời câu hỏi
Có thể bạn quan tâm