如何使图像适合边栏左侧的可用空间？但是当它被其他内容压低时，它应该调整到原来的大小。
参见 http://plnkr.co/edit/5emOdkHN1dVHf7jOTZqD?p=preview
如您所见，图像宽度为 400 像素，向右浮动的侧边栏 div 的左侧空间仅为 300 像素。我试图完成的是图像显示在侧边栏的左侧，并自动调整大小以适应这个空间。但是，如果在图像上方添加文本(这是针对 CMS)并且图像被向下推到侧边栏下方，那么它应该再次调整大小以填充它现在拥有的空间，除非它超过其原始大小。
.container {
width: 600px;
border: 1px solid #008000;
}
.main {
border: 1px solid #800a0b;
}
.sidebar {
width: 300px;
float: right;
border: 1px solid #303c80;
}
.clear {
clear: both;
}
img {
width: auto;
}<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://imsky.github.io/holder/holder.js" type="application/javascript"></script>
</head>
<body>
<div class="container">
<div class="main">
<div class="sidebar">
<p>Aliquam faucibus vitae risus et tempus. Praesent ut ex at tortor congue condimentum. Praesent vel libero id augue ornare ultricies quis eu urna. Nulla et ornare risus. Duis volutpat, arcu a vulputate rhoncus, tortor leo lacinia turpis, sed cursus
libero sapien quis neque. Curabitur dui nibh, convallis ut enim vitae, congue sollicitudin orci. Mauris pretium euismod interdum. Duis vitae sodales elit. Donec eu condimentum nisl.</p>
</div>
<img src="holder.js/400x200">
<p>Aliquam faucibus vitae risus et tempus. Praesent ut ex at tortor congue condimentum. Praesent vel libero id augue ornare ultricies quis eu urna. Nulla et ornare risus. Duis volutpat, arcu a vulputate rhoncus, tortor leo lacinia turpis, sed cursus
libero sapien quis neque. Curabitur dui nibh, convallis ut enim vitae, congue sollicitudin orci. Mauris pretium euismod interdum. Duis vitae sodales elit. Donec eu condimentum nisl.</p>
<div class="clear"></div>
</div>
</div>
</body>
</html>最佳答案
我不认为你可以用一些 css 来做到这一点。
我把图片设为 1px 宽， 确定图像位置是在侧边栏上方还是下方 然后使用 jquery 调整大小。
$(function(){
var mainWidth = $('.main').width();
var sidebarWidth = $('.sidebar').outerWidth();
var sidebarHeight = $('.sidebar').outerHeight();
var imagePosition = $('.main > img').position().top;
if(imagePosition < sidebarHeight){
$('.main > img').css('width', mainWidth - sidebarWidth);
}else{
$('.main > img').css('width', 'auto');
}
});
关于html - 如何在 float 侧边栏旁边动态调整图像大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27840666/