将图像放在 div 的中间并在窗口变得太小时时调整其大小

Question

我有一张图片需要放在一个最大宽度为 700px 的 div 中间；

当窗口变窄并且 div 变得小于它包含的图像的宽度时，我希望图像也变小。

在下面的小提琴中，我分别添加了这两个函数：https://jsfiddle.net/rb1hyxh2/，但我找不到将它们组合起来的方法（例如，margin: 0 auto; 不适用于此处的内联块...）

<div class="header1"><div class="header2">
    <img src="http://wp.patheos.com.s3.amazonaws.com/blogs/faithwalkers/files/2013/03/bigstock-Test-word-on-white-keyboard-27134336.jpg" class="header3">
</div></div>

<div class="header1">
    <img src="http://wp.patheos.com.s3.amazonaws.com/blogs/faithwalkers/files/2013/03/bigstock-Test-word-on-white-keyboard-27134336.jpg" class="headerA">
</div>


.header1{
    padding-bottom: 16px;
    background-color: red;  
    max-width: 700px;
    margin-bottom: 30px;
}

.header2{
    background-color: blue;
    display:inline-block;
}
.header3{
    width: 100%;
}

.headerA{
    display:block;
    margin:auto;
}

Answer 1

一个简单的解决方案是将 headerA 上的 ma​​x-width 设置为图像的宽度，并将其 width 设置为 100%。这样当 div 小于 500px 时它会填满 div 的大小。

Codepen

HTML

<div class="header1">
  <img src="http://wp.patheos.com.s3.amazonaws.com/blogs/faithwalkers/files/2013/03/bigstock-Test-word-on-white-keyboard-27134336.jpg" class="headerA" />
</div>

CSS

.header1 {
  padding-bottom: 16px;
  background-color: red;
  max-width: 700px;
  margin-bottom: 30px;
}

.headerA {
  display: block;
  margin: auto;
  max-width: 500px;
  width: 100%;
}

在 CSS

中添加了行

  max-width: 500px;
  width: 100%;

Answer 2

如果你添加

img {
  width: 100%; /* or any other value < 100% will stay within bounds */
}

到您的 css 文件，然后您的图像将保持在您拥有的红色 div 的范围内。这是你想要的吗？

Answer 3

这是将所有具有.headerA 类的图像设置为其原始宽度的最大宽度的 javscript 版本，请参阅小提琴https://jsfiddle.net/rb1hyxh2/5/

<script>
var imgs = document.querySelectorAll('.headerA');
for (var i = 0, element; element = imgs[i]; i++) {
        var w = imgs[i].naturalWidth;
    imgs[i].style.maxWidth = w+"px";
}
</script>

我想这就是你要找的https://jsfiddle.net/rb1hyxh2/3/

我在图像中添加了width: 100%; 和max-width: 500px;，这会将img 设置为div 的100%，但当div 大于500px 时不会；

.headerA {
  display: block;
  margin: auto;
  width: 100%;
  max-width: 500px;
}