Question

我有响应式设计，其中帖子内部图像的大小取决于其容器div的宽度＆＃34; .postinner＆＃34;在div内部＃34; .postwrapper＆＃34;。＆＃34; .postwrapper＆＃34;的宽度取决于窗口的宽度和网站其他元素的存在与否。

＆＃13;

.postwrapper {
  border: 1px solid #00f; 
  padding:5px;
}
.postinner {
  border: 1px solid #0f0; 
  max-width:10em; 
  padding:5px;
}
.postimage {
  max-width:100%; 
  height:auto;
}

＆＃13;

<div class="postwrapper">
  <div class="postinner">
    text text text text text text
    <img class="postimage" src="https://dummyimage.com/500x300/eb8d00/ffffff&text=image">
    text text text text text text
  </div>
</div>

＆＃13;

我的目标：我想限制＆＃34; .postinner＆＃34;的宽度。通过设置＆＃34; max-width：35em;＆＃34;为了更好的阅读体验。同时我想要使图像大小取决于响应＆＃34; .postwrapper＆＃34;的宽度。只要。虽然图像仍在容器内部，但是＃34; .postinner＆＃34;。所以图像应该忽略它的容器＆＃34; .postinner＆＃34;限制，并适应＆＃34; .postwrapper＆＃34;代替。

是否可以只使用CSS？

注意：图像的大小始终不同。

jsfiddle

visual expression of what I want to do (jpg)

Answer 1

我刚刚用jQuery做过这个，如果你想要这个，请把它拿走，只需运行代码片段，你可以看到，图像宽度取决于$(document).ready(function() { var widthMain = $('.postwrapper').width(); $('.postimage').width(widthMain - 10); });宽度

.postwrapper {
  border: 1px solid #00f;
  padding: 5px;
  width: 50%;
}

.postinner {
  border: 1px solid #0f0;
  max-width: 10em;
  padding: 5px;
}

.postimage {
  height: auto;
}

<div class="postwrapper">
  <div class="postinner">
    text text text text text text
    <img class="postimage" src="https://dummyimage.com/500x300/eb8d00/ffffff&text=image"> text text text text text text
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

public override void OnSaveInstanceState (Bundle outState, PersistableBundle outPersistentState) {
    base.OnSaveInstanceState (outState, outPersistentState);
}

父母的父母的响应图像边界？

1 个答案: