如何在浮动边栏旁边动态调整图片大小？ [英] How can I make an image resize dynamically next to a floating sidebar?
问题描述
如何让图片适合侧栏中的可用空间？但是当它被其他内容压缩时，它应该调整为原始大小。
How can I make the image fit into the available space left to the sidebar? But when it gets pushed down by additional content it should resize to its original size.
请参阅 http://plnkr.co/edit/5emOdkHN1dVHf7jOTZqD?p=preview
如您所见宽度为400像素，向右侧浮动的边栏div的空间仅为300像素。我试图做的是，图像显示在左边的侧边栏，并自动调整大小以适应这个空间。但是如果文字被添加到图片上方（这是CMS），并且图片被下拉到侧边栏下面，那么它应该再次调整大小以填充现在已经超过其原始大小的空间。
As you can see the image is 400px width, the space left to the sidebar div that floats right is just 300px. What I try to get done is that the image is displayed left from the sidebar and auto resizes to fit into this space. But if text is added above the image (this is for CMS) and the image gets pushed down below the sidebar, then it should resize again to fill the space it now has except it exceeds its original size.
.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。
I dont think you can do this with some css.
我做的图像1px宽，
确定如果图像位置高于或低于边栏
，然后用jquery调整大小。
I made the image 1px wide, determined if the image position was above or below the sidebar and then resize with 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');
}
});
示例：
http://plnkr.co/edit/tLWXcLMloSgy527Gwzbz?p=preview
这篇关于如何在浮动边栏旁边动态调整图片大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
