缩小 img 以适应带有侧边栏的 div

Question

我正在为某人开发一个旧网站，无法理解其中的某些内容 css:

我有一个div包含页面（文章）内容，其中当然包括一些图像。在 div 的顶部有另一个 div，其中包含有关该文章的额外信息。第二个 div 向左浮动。

<div class="entry-content">
  <div class="lefttable"> //floated to the left
  //some information here
  </div>

  //content here, including images
</div>

不知何故，内容中的 img 甚至在页面顶部也是全尺寸的，而它们应该在 lefttable div 旁边的地方，却跳到了它下面。

这里是打印屏幕：https://snag.gy/qFChjB.jpg

和页面本身：http://www.bayadaim.org.il/95b

谢谢，伊塔马尔

Answer 1

你可以试试max-width and calc():

.lefttable {
  width:200px;
  float:left;
}
.right {
  overflow:hidden: /* to deal with floats in and out */;
}
.right img {
  max-width:calc(100% - 200px); /* where 200px is the room used by lefttable ( mind borders,  padding and margins) */
}

<div class="entry-content">
  <div class="lefttable"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>   
  </div>
  <div class="right">
    <img src="http://dummyimage.com/1200x200" />
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>

Answer 2

您图片的父级

width: 970px
wp-caption 和 aligncenter 类意思是：
- width: 650px !important 来自 style.css:1271
- display: block; 来自 style.css:1257.

以上所有规则都禁止您的元素显示内联，并排显示在它前面的浮动内容。

您需要为图像的父元素提供一个宽度，以响应地补偿浮动内容的宽度（您可以使用 max-width 和 calc 来做到这一点，前提是页面容器具有position:relative，它确实如此）并且您还需要将它的 display 设置为 inline、inline-block 或 inline-flex。我推荐 inline-block.

这就是理论。
实际上，对于您非常具体的情况，您还需要补偿一些 padding/margin 左浮动元素。这是 CSS：

#post-34917 #attachment_34937 {
  display: inline-block;
  max-width: calc(100% - 220px);
  position: relative;
  margin-left: -20px;
}
#content .aligncenter>img {
  width: 100%;
  height: auto;
}
@media (max-width: 1023px) {
  #post-34917 #attachment_34937 {
    max-width: calc(100% - 170px);
  }
}

Answer 3

使用一些 jQuery 我找到了方法。它没有响应，但我正在编辑的这个主题也没有 - 所以它对我来说已经足够好了。当然，非常欢迎任何想要开发它的人。

CSS 部分

将所有图像包装器 (wp-caption) 的宽度设置为主要内容的宽度 div，它较窄，靠近浮动 div。

#content .wp-caption {
    width: 66%;
}

jQuery 部分

//make all images in posts 100% width except images next to the left table
jQuery(document).ready(function(){
        var h = jQuery(".lefttable").height(); //get left table height

        jQuery('.entry-content .wp-caption').each(function(){ //loop through all .wp-captions in the content
            jQuery(this).removeAttr('style') //remove any disturbing inline styles. optional.
            var p = jQuery(this).position(); //get each .wp-caption position
            var top = p.top; //top position
            if(top > h){ //if .wp-caption is below .lefttable
                jQuery(this).css("width", "initial") //change .wp-caption width to original (or anything you like)
            }
        });
});

就是这样。我希望有人能从中受益。伊塔马尔

缩小 img 以适应带有侧边栏的 div

shrink img to fit a div with a sidebar

css

image

css-float

CSS 部分

jQuery 部分