我有标准的3列布局，左右列中的img类似。当我调整页面大小时，右图变小，而左图则没有。并且中间容器溢出了左图像。
用于调整图像大小的CSS：
img {
display: block;
max-width: 100%;
height: auto;
}
我的完整代码是：
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.logo_item {
display: inline-block;
margin-left: 2.5em;
margin-right: 2.5em;
}
img {
display: block;
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="container-fluid">
<!-- 2nd row -->
<div class="row mt-4">
<div class="brd_black col">
<div style="position:fixed;">
<a href="javascript:window.history.back();"><img src="https://v1.iconsearch.ru/uploads/icons/crystalclear/64x64/folder_home.png" /></a></div>
</div>
<div class="brd_black col-10">
<div class="row">
<div class="brd_black col-12 bg-white align-top brd_grey pb-3 pt-3 text-center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
</div>
</div>
</div>
<div class="brd_black col">
<div style="position:fixed;">
<a href="faq.html"><img src="https://v1.iconsearch.ru/uploads/icons/crystalclear/64x64/folder_home.png" target="_blank" /></a></div>
</div>
</div>
</div>
</div>
</body>
</html>
但是为什么呢？
答案 0 :(得分：2)
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.logo_item {
display: inline-block;
margin-left: 2.5em;
margin-right: 2.5em;
}
img {
display: block;
max-width: 100%;
height: auto;
}
.bg_img
{
background: url('https://v1.iconsearch.ru/uploads/icons/crystalclear/64x64/folder_home.png')no-repeat center center;
display: block;
width: 20px;
height: 20px;
background-size: contain;
float: left;
position: fixed;
}
</style>
</head>
<body>
<div class="container-fluid">
<!-- 2nd row -->
<div class="row mt-4">
<div class="brd_black col">
<div>
<a href="javascript:window.history.back();" class="bg_img"></a>
</div>
</div>
<div class="brd_black col-10">
<div class="row">
<div class="brd_black col-12 bg-white align-top brd_grey pb-3 pt-3 text-center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
</div>
</div>
</div>
<div class="brd_black col">
<div>
<a href="faq.html" class="bg_img"></a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
答案 1 :(得分：1)
从div中删除position:fixed样式。
我已经尝试了您的代码，并删除了img标签样式，并用默认的img-fluid类bootstrap-4替换了它，效果很好。
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.logo_item {
display: inline-block;
margin-left: 2.5em;
margin-right: 2.5em;
}
.sticky {
position: sticky;
position: -webkit-sticky !important;
top: 0;
right: 0;
left: 0;
z-index: 1030;
display: flex;
}
.stick_img{
position: sticky;
position: -webkit-sticky !important;
top: 15px;
}
</style>
</head>
<body>
<div class="container-fluid">
<!-- 2nd row -->
<div class="row mt-4">
<div class="brd_black col sticky">
<div>
<a href="javascript:window.history.back();"><img src="https://v1.iconsearch.ru/uploads/icons/crystalclear/64x64/folder_home.png" class="img-fluid stick_img" /></a></div>
</div>
<div class="brd_black col-10">
<div class="row">
<div class="brd_black col-12 bg-white align-top brd_grey pb-3 pt-3 text-center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
</div>
</div>
</div>
<div class="brd_black col sticky">
<div>
<a href="faq.html"><img src="https://v1.iconsearch.ru/uploads/icons/crystalclear/64x64/folder_home.png" target="_blank" class="img-fluid stick_img" /></a></div>
</div>
</div>
</div>
</div>
</body>
</html>
尝试整个代码，希望它能工作
答案 2 :(得分：0)
删除代码的position:fixed;样式。