Question

我正在进行CSS3转换。

parentDiv{
    overflow:scroll;
}
img{
    width:100%;
    height:auto;
}

我在div中有一个图像。 parentDiv根据图像高度在y方向上滚动。但是当我用css3比例转换img时，img宽度增加，但父div不在x方向滚动。 Jsfiddle链接:: https://jsfiddle.net/yf48ga22/

Answer 1

请scaling image scale div image scroll axis i.e x and y html structure $(document).ready(function(){ $("#box > .ch").css({ 'transform' : 'scale(1.8)', 'transition' : '1s ease' }); }); #box{ overflow-x: auto; overflow-y: auto; display: flex; background:red; flex-direction: column; } #box > .ch{ flex:1; flex-shrink: 0; background: #fff; overflow: auto; } #box > .ch > img{ width:100%; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="box"> <div class="ch"> <img src = "https://s3-us-west-2.amazonaws.com/cbsapp/package_content/s78c_e4vt6/main_images/pg_4.jpg"> </div> </div> Application 'clothes' is running! Access URLs: Local: http://localhost:8080 External: http://192.168.56.1:8080 Profile(s): [swagger, dev] ---------------------------------------------------------- 2017-04-06 11:15:17.186 INFO 6344 --- [ restartedMain] com.anelsoftware.clothes.ClothesApp : ---------------------------------------------------------- Config Server: Connected to the JHipster Registry config server! ---------------------------------------------------------- 2017-04-06 11:19:58.930 INFO 6344 --- [trap-executor-0] c.n.d.s.r.aws.ConfigClusterResolver : Resolving eureka endpoints via configuration x[a > 5, setNames(list(a, get(colname)), c("a", newcolname))]。我只是为了理解检查jsFiddle而进行了一些更改setNames()。

grow

shrink

html,body {
  height: 100%;
  margin: 0;
  padding: 0;
}
table {
  border: solid 1px;
}
.main-div {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.working-area {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.footer {
  height: 20px;
}
.top {
  background: red;
}
.bottom {
  flex: 1 1 auto;
  overflow-y: auto;
  background: green;
}

如果孩子使用css3烫伤，父容器不会溢出：转换：缩放

1 个答案: