Cách set size image cùng kích thước không bị vỡ hình với css

03/01/2022 03:12 1108

Table of Contents

Trong wordpress có hỗ trợ cắt image ra nhiều size mong muốn tuy nhiên cách này sẽ làm tăng dung lượng hosting và giải pháp ở đây là chúng ta chỉ cần dùng 3 size mặc định của wordpress đó là thumbnail, medium, large và full sau đó dùng css để làm việc này. Ngay sau đây mình xin chia sẽ cách làm

1.Video giới thiệu

2.Code tham khảo

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Cách set size image cùng kích thước không bị vỡ hình với css fcwordpress.net</title>
	<style>
		
		.image-wrap {
    display: flex;
    flex-flow: row wrap;
}

.image-item {
    flex-basis: 20%;
    max-width: 25%;
    padding: 10px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    max-width: 100%;
    object-fit: cover;
    width: 100%;
    height: 250px;
    object-position: 20px 20px;
}
	

	</style>
</head>
<body>
<div class="image-wrap">
<div class="image-item">
	<div class="box-image" >
                  
                  <img src="https://fcwordpress.net/wp-content/uploads/2021/04/24_Marketing_1-1_course-Hero-11012021.jpg" />                                                      
                </div>
				</div>
				<div class="image-item">
	<div class="box-image" >
                  
                  <img src="https://fcwordpress.net/wp-content/uploads/2021/04/4_OnlineCourse-VideoOverlay-22122020.jpg" />                                                      
                </div>
				</div>
				<div class="image-item">
	<div class="box-image" >
                  
                  <img src="https://fcwordpress.net/wp-content/uploads/2021/04/4_OnlineCourse-Amanda_Borkin.jpg" />                                                      
                </div>
				</div>
				<div class="image-item">
	<div class="box-image" >
                  
                  <img src="https://fcwordpress.net/wp-content/uploads/2021/04/24_Marketing_1-1_course-Hero-11012021.jpg" />                                                      
                </div>
				</div>
				<div class="image-item">
	<div class="box-image" >
                  
                  <img src="https://fcwordpress.net/wp-content/uploads/2021/04/24_Marketing_1-1_course-Hero-11012021.jpg" />                                                      
                </div>
				</div>
				<div class="image-item">
	<div class="box-image" >
                  
                  <img src="https://fcwordpress.net/wp-content/uploads/2021/04/24_Marketing_1-1_course-Hero-11012021.jpg" />                                                      
                </div>
				</div>
				<div class="image-item">
	<div class="box-image" >
                  
                  <img src="https://fcwordpress.net/wp-content/uploads/2021/04/24_Marketing_1-1_course-Hero-11012021.jpg" />                                                      
                </div>
				</div>
				<div class="image-item">
	<div class="box-image" >
                  
                  <img src="https://fcwordpress.net/wp-content/uploads/2021/04/24_Marketing_1-1_course-Hero-11012021.jpg" />                                                      
                </div>
				</div>
				<div class="image-item">
	<div class="box-image" >
                  
                  <img src="https://fcwordpress.net/wp-content/uploads/2021/04/24_Marketing_1-1_course-Hero-11012021.jpg" />                                                      
                </div>
				</div>
				<div class="image-item">
	<div class="box-image" >
                  
                  <img src="https://fcwordpress.net/wp-content/uploads/2021/04/24_Marketing_1-1_course-Hero-11012021.jpg" />                                                      
                </div>
				</div>
				</div>
</body>
</html>

100

<!DOCTYPE html>

<head>

<title>Cách set size image cùng kích thước không bị vỡ hình với css fcwordpress.net</title>

<style>

.image-wrap {

display: flex;

flex-flow: row wrap;

}

.image-item {

flex-basis: 20%;

max-width: 25%;

padding: 10px;

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

img {

max-width: 100%;

object-fit: cover;

width: 100%;

height: 250px;

object-position: 20px 20px;

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

5/5 (1 Đánh giá)

Gửi Phản Hồi

0 Bình Luận

có thể bạn cần xem:

Kỹ thuật css cho checkbox input đẹp hơn [ 05/05/2023 10:32 ]
Css để tăng khoản cách giữa các dot trong border [ 13/12/2022 10:16 ]
Hiệu ứng hover slide image siêu đẹp [ 26/06/2022 13:47 ]
Function tạo rating star sử dụng dashicon từ wordpress [ 03/04/2022 03:02 ]
Css menu vertical danh muc đơn giản [ 20/02/2022 12:40 ]
Html và css section với title, description và card siêu đơn giản [ 17/02/2022 11:22 ]
Hiệu ứng css đẹp transform scale3d [ 10/02/2022 04:05 ]
CSS Animations hoạt động như thế nào [ 14/01/2022 03:49 ]
Code phóng to thumbnail khi hover với CSS3 [ 02/01/2022 07:15 ]
Hiệu ứng shine css đẹp animation [ 05/10/2021 08:06 ]

Cách set size image cùng kích thước không bị vỡ hình với css

1.Video giới thiệu

2.Code tham khảo

có thể bạn cần xem:

Đăng ký nhận bài viết mới

Hướng dẫn thiết kế theme

Thiết kế theme wordpress phần 8

Thiết kế theme wordpress phần 7

Thiết kế theme wordpress phần 6

Thiết kế theme wordpress phần 5

Thiết kế theme wordpress-phần 4

Các functions thường dùng

Function xử lý upload to media wordpress

Function get ip address

Thay thế file_get_contents

Code tích hợp acf vào theme và plugin

Một số function thường dùng khi làm theme wordpress (some functions popular for work do theme worpdress)