Question

我的图像需要放在最大宽度为div的div中间：700px;

当窗口变窄并且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上的 max-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

这是javscript版本，用于将所有具有类.headerA的图像设置为其原始宽度的最大宽度，请参阅小提琴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;
}

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

3 个答案: