如何在浮动侧边栏旁边动态调整图像大小？

Question

如何使图像适合边栏左侧可用的 space？但是当它被其他内容压低时，它应该调整到原来的大小。

见http://plnkr.co/edit/5emOdkHN1dVHf7jOTZqD?p=preview

如您所见，图片宽度为 400 像素，space 左侧向右浮动的边栏 div 宽度仅为 300 像素。我试图完成的是图像显示在侧边栏的左侧，并自动调整大小以适应这个 space。但是，如果在图像上方添加文本（这是用于 CMS）并且图像被向下推到侧边栏下方，那么它应该再次调整大小以填充它现在的 space 除了它超过其原始大小。

    .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>

Answer 1

尝试为您的图像创建一个单独的 div。将你的图像放在 div 中，制作你的 float:none 并使用边距属性。它应该适合你。

Answer 2

不确定我是否理解正确。但是如果你想让.sidebar的内容填满space，当图片被下推时，你可以把.sidebar的宽度设置为min-width 100 像素？

像这样：min-width: 100px;

See here

Answer 3

我不认为你可以用一些 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');
        }
      });

示例： http://plnkr.co/edit/tLWXcLMloSgy527Gwzbz?p=preview

Answer 4

这里用纯 CSS 解决了：

您只需要使用设置为 overflow: hidden 的元素包裹图像。

如何在浮动侧边栏旁边动态调整图像大小？

How can I make an image resize dynamically next to a floating sidebar?

html

css

image