Tidadigi Logo

CSS Styling Images

CSS cho phép bạn áp dụng các kiểu khác nhau cho ảnh. Điều này giúp ảnh trở nên trực quan và tương tác hơn. Bạn có thể sửa đổi giao diện và hành vi của ảnh trên trang web. Hãy sử dụng các thuộc tính CSS như border-radius, box-shadow và filter.

Thumbnail Images

Thuộc tính border giúp tạo ảnh thu nhỏ bằng cách thêm viền quanh ảnh. Nó mang lại cho ảnh một giao diện rõ ràng và được xác định.

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        img {
            border: 1px solid black;
            border-radius: 5px;
            padding: 5px;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <img src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png" 
    alt="thumbnail-image"
        style="width:400px">
</body>
</html>
<!--Driver Code Ends-->
  • Thuộc tính border xác định kích thước và màu sắc của đường viền ảnh.
  • Các thuộc tính width và height đặt kích thước cho ảnh thu nhỏ.

Border-radius Property

Thuộc tính border-radius property làm tròn các góc của ảnh. Tạo ra một hình tròn hoặc hình bầu dục dựa trên các giá trị được cung cấp.

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        img {
            border-radius: 50%;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/forkandgeeksclassesV-min.png" 
         alt="rounded-image"
        width="400" height="400">
</body>
</html>
<!--Driver Code Ends-->
  • border-radius: 50% tạo ra một hình tròn khi áp dụng cho ảnh vuông.
  • Chiều rộng và chiều cao xác định kích thước của hình ảnh.

Responsive Images

Ảnh responsive tự động điều chỉnh để phù hợp với kích thước vùng chứa. Đảm bảo ảnh hiển thị tốt trên các kích thước màn hình khác nhau.

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        img {
            max-width: 100%;
            height: auto;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png" 
         alt="Responsive-image"
         width="1000" 
         height="300">
</body>
</html>

<!--Driver Code Ends-->
  • width: 100% làm cho hình ảnh điều chỉnh theo chiều rộng của vùng chứa.
  • height: auto đảm bảo hình ảnh duy trì tỷ lệ khung hình của nó.

Transparent Image

Thuộc tính opacity property được sử dụng để làm cho hình ảnh trong suốt. Giá trị nằm trong khoảng từ 0 (hoàn toàn trong suốt) đến 1 (hoàn toàn mờ).

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        img {
            opacity: 0.5;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <img src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png" 
         alt="Transparent-image" width="100%">
</body>
</html>
<!--Driver Code Ends-->
  • opacity: 0.5 làm cho hình ảnh bán trong suốt.
  • Hình ảnh sẽ xuất hiện với độ mờ giảm. Nó cho phép nhìn thấy nền xuyên qua nó.

Center an Image

Để căn giữa hình ảnh trong một vùng chứa, bạn có thể dùng margin và display.

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
    img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    </style>

<!--Driver Code Starts-->
</head>
<body> 
 <img src= "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png" 
      alt="centered-image" 
      style="width:50%"> 
</body>
</html>
<!--Driver Code Ends-->
  • display: block làm cho hình ảnh hoạt động như một phần tử block.
  • margin-left: auto and margin-right: auto căn giữa hình ảnh theo chiều ngang.

Last Updated : 21/07/2025