Question

我想要做的是让这个网站上的图像的宽度和高度（它们应该相等）在50-60px之间变化。然而，在它们之间，它们都需要具有5px的最小填充。这可以根据图像的大小而变化，这是因为两个末端图像需要适合父div的边缘，以与关于它的图像对齐。高度/宽度/填充应全部更改，以确保在屏幕尺寸更改时图像仍然正确对齐。

如果您查看此页面，您将能够看到我的意思。需要更改的图像是底部的灰色方块。

http://media.gaigo.org/work2.html

这是我的HTML：

<div class="smallImages">
    <div><a href="#item-1"><img src="static/img/smallImage.png"></a></div>
    <div><a href="#item-2"><img src="static/img/smallImage.png"></a></div>
    <div><a href="#item-3"><img src="static/img/smallImage.png"></a></div>
    <div><a href="#item-4"><img src="static/img/smallImage.png"></a></div>
</div>

我的css如下：

smallImages div {
    display: inline-block;
    padding: 5px;
}
.smallImages div img {
    max-width: 60px;
    min-width: 50px;
    max-height: 60px;
    min-height: 50px;
}

很抱歉，如果这看起来令人困惑。只要问你是否需要我解释一下。

Answer 1

一种选择是设置百分比宽度，但该数字百分比取决于行中的图像数量。见这个例子：

＆＃13;

* {
  box-sizing:border-box; /* You need this so that heights and widths are inclusive of padding and border */  
}
.container {
  width:400px; /* set this to whatever you like, it should work still */
  padding:5px;
  border:1px solid;
}
.row {
  width:100%;
  padding:0 5px;
}
.row img {
  padding:5px;  
}
.row.one img {
  width:100%;  
}
.row.two img {
  width:50%;  
}
.row.three img {
  width:33.33%;  
}
.row.four img {
  width:25%;  
}

＆＃13;

<div class="container">
  <div class="row one">
    <img src="http://placehold.it/150x150">
  </div>
  <div class="row two">
    <img src="http://placehold.it/150x150"><!--
    --><img src="http://placehold.it/150x150">
  </div>
  <div class="row three">
    <img src="http://placehold.it/150x150"><!--
    --><img src="http://placehold.it/150x150"><!--
    --><img src="http://placehold.it/150x150">
  </div>
  <div class="row four">
    <img src="http://placehold.it/150x150"><!--
    --><img src="http://placehold.it/150x150"><!--
    --><img src="http://placehold.it/150x150"><!--
    --><img src="http://placehold.it/150x150">
  </div>
</div>

＆＃13;

在行之间放置HTML注释意味着图像之间没有空白区域。

Answer 2

这就是你所追求的目标。

显示内联块不会让图像以您需要使用表格的方式运行。

您应该只检查您正在使用的网站的源代码..

 <workflow-app xmlns="uri:oozie:workflow:0.4" name="shell-wf">
<start to="shell-node"/>
<action name="shell-node">
    <shell xmlns="uri:oozie:shell-action:0.2">
        <job-tracker>${jobTracker}</job-tracker>
        <name-node>${nameNode}</name-node>
        <configuration>
            <property>
                <name>mapred.job.queue.name</name>
                <value>${queueName}</value>
            </property>
        </configuration>
        <exec>echo</exec>
        <argument>my_output=Hello Oozie</argument>
        <capture-output/>
    </shell>
    <ok to="check-output"/>
    <error to="fail"/>
</action>
<decision name="check-output">
    <switch>
        <case to="end">
            ${wf:actionData('shell-node')['my_output'] eq 'Hello Oozie'}
        </case>
        <default to="fail-output"/>
    </switch>
</decision>
<kill name="fail">
    <message>Shell action failed, error message[${wf:errorMessage(wf:lastErrorNode())}]</message>
</kill>
<kill name="fail-output">
    <message>Incorrect output, expected [Hello Oozie] but was [${wf:actionData('shell-node')['my_output']}]</message>
</kill>
<end name="end"/>

 .row {
   display: table-row;
 }
 .smallImages {
   padding-left: 0px;
   margin-bottom: 0px;
   display: table;
   text-align: center;
 }
 .smallImages .row div {
   display: table-cell;
   padding: 5px;
 }
 .smallImages .row div:first-child {
   padding-left: 0;
 }
 .smallImages .row div img {
   max-width: 100%;
 }
 img {
   border: 0;
 }

如何使图像高度/宽度/填充自动缩放以适当地适合图像

2 个答案: