CSS如何伸展以适应和保持纵横比？
我有以下css：
.mod.left {
background-image: url("http://www.myimage.jpg");
display: block;
height: 160px;
overflow: hidden;
width: 175px;
}
这对应于这个HTML：
<div class="mod left"></div>
导致这个混乱：
如果我使用css3 background-size：175px 160px;宽高比真的搞砸了，导致像这样的混乱：
有没有办法拉伸图像以适合div？但在保持纵横比的方式？我想要一个自动裁剪。
5 个答案:
答案 0 :(得分：31)
这应该有效（在支持background-size的浏览器中）：
background-size: 175px auto;
您也可以尝试：
background-size: cover;
或者：
background-size: contain;
答案 1 :(得分：5)
是否需要成为背景图片？
img{
width:300px;
height:auto;
}
<img src="your-photo.png">
答案 2 :(得分：2)
您可以使用CSS Object-fit属性。
{
height: 160px;
width: 175px;
object-fit: cover;
}
对象拟合可以具有以下值。
包含，覆盖，填充，无，缩小。有关详细信息，请参阅上面的链接。
答案 3 :(得分：1)
您可以将background-size属性与contain值一起使用：
background-size: contain;
这是一个工作示例： http://dev.mysql.com/doc/refman/5.7/en/group-by-optimization.html
在上面的示例中，正文在背景中有一个拉伸的图像。还有两个具有任意大小的div，另一个图像适合并保持纵横比。
答案 4 :(得分：1)
如果使用不是背景的img，我发现了这种方法：
<detail>
<band height="261" splitType="Stretch">
<componentElement>
<reportElement x="0" y="10" width="555" height="200" uuid="d58206f4-e51f-462a-9950-5bcdd6df15ac">
<property name="com.jaspersoft.studio.layout" value="com.jaspersoft.studio.editor.layout.VerticalRowLayout"/>
<property name="com.jaspersoft.studio.table.style.table_header" value="Table_TH"/>
<property name="com.jaspersoft.studio.table.style.column_header" value="Table_CH"/>
<property name="com.jaspersoft.studio.table.style.detail" value="Table_TD"/>
</reportElement>
<jr:table xmlns:jr="http://jasperreports.sourceforge.net/jasperreports/components" xsi:schemaLocation="http://jasperreports.sourceforge.net/jasperreports/components http://jasperreports.sourceforge.net/xsd/components.xsd">
<datasetRun subDataset="RetainsDataset" uuid="ed199ef3-a25a-4207-abf1-4d75de2ebc9e">
<dataSourceExpression><![CDATA[$P{RetainsModelParam}]]></dataSourceExpression>
</datasetRun>
<jr:column width="60" uuid="bc9156b7-ba42-4a4c-a64d-8c8d7fa00d92">
<property name="com.jaspersoft.studio.components.table.model.column.name" value="Column1"/>
<jr:tableHeader style="Table_TH" height="30" rowSpan="1">
<staticText>
<reportElement x="0" y="0" width="60" height="30" uuid="eb2846e1-20de-4f43-bfa3-f6e22a84e9fc"/>
<textElement textAlignment="Center" verticalAlignment="Middle"/>
<text><![CDATA[Date]]></text>
</staticText>
</jr:tableHeader>
<jr:tableFooter style="Table_TH" height="30" rowSpan="1"/>
<jr:columnHeader style="Table_CH" height="30" rowSpan="1">
<textField>
<reportElement x="0" y="0" width="60" height="30" uuid="721cfe8c-79e8-4b91-9539-2a935e725960"/>
<textElement textAlignment="Center" verticalAlignment="Middle"/>
<textFieldExpression><![CDATA[$F{date}]]></textFieldExpression>
</textField>
</jr:columnHeader>
<jr:columnFooter style="Table_CH" height="30" rowSpan="1"/>
<jr:detailCell style="Table_TD" height="30"/>
</jr:column>
<jr:column width="50" uuid="13a29da4-8552-40d1-bd6a-7750656357eb">
<property name="com.jaspersoft.studio.components.table.model.column.name" value="Column2"/>
<jr:tableHeader style="Table_TH" height="30" rowSpan="1">
<staticText>
<reportElement x="0" y="0" width="50" height="30" uuid="65bb3b57-169b-4e6b-85b6-f6de9d3feb2b"/>
<textElement textAlignment="Center" verticalAlignment="Middle"/>
<text><![CDATA[Emp Code]]></text>
</staticText>
</jr:tableHeader>
<jr:tableFooter style="Table_TH" height="30" rowSpan="1"/>
<jr:columnHeader style="Table_CH" height="30" rowSpan="1">
<textField>
<reportElement x="0" y="0" width="50" height="30" uuid="28ec9c9b-297b-49a3-97ac-5202149ec21f"/>
<textElement textAlignment="Center" verticalAlignment="Middle"/>
<textFieldExpression><![CDATA[$F{WORKERSNO}]]></textFieldExpression>
</textField>
</jr:columnHeader>
<jr:columnFooter style="Table_CH" height="30" rowSpan="1"/>
<jr:detailCell style="Table_TD" height="30"/>
</jr:column>
<jr:column width="70" uuid="38eafee5-fd0b-4a5e-af19-44562b12ff38">
<property name="com.jaspersoft.studio.components.table.model.column.name" value="Column3"/>
<jr:tableHeader style="Table_TH" height="30" rowSpan="1">
<staticText>
<reportElement x="0" y="0" width="70" height="30" uuid="2c25cc41-a3f1-4ccd-8c9e-2166f4276e6f"/>
<textElement textAlignment="Center" verticalAlignment="Middle"/>
<text><![CDATA[Name]]></text>
</staticText>
</jr:tableHeader>
<jr:tableFooter style="Table_TH" height="30" rowSpan="1"/>
<jr:columnHeader style="Table_CH" height="30" rowSpan="1">
<textField>
<reportElement x="0" y="0" width="70" height="30" uuid="75adf16e-c0df-4ef7-9541-5bcc21a95c16"/>
<textElement textAlignment="Center" verticalAlignment="Middle"/>
<textFieldExpression><![CDATA[$F{WORKERSNAME}]]></textFieldExpression>
</textField>
</jr:columnHeader>
<jr:columnFooter style="Table_CH" height="30" rowSpan="1"/>
<jr:detailCell style="Table_TD" height="30"/>
</jr:column>
<jr:column width="70" uuid="daccdd68-e72f-421d-80ab-006745a3d855">
<property name="com.jaspersoft.studio.components.table.model.column.name" value="Column4"/>
<jr:tableHeader style="Table_TH" height="30" rowSpan="1">
<staticText>
<reportElement x="0" y="0" width="70" height="30" uuid="cf5922b5-0081-49c0-92df-b2750afcc124"/>
<textElement textAlignment="Center" verticalAlignment="Middle"/>
<text><![CDATA[Prod Code]]></text>
</staticText>
</jr:tableHeader>
<jr:tableFooter style="Table_TH" height="30" rowSpan="1"/>
<jr:columnHeader style="Table_CH" height="30" rowSpan="1">
<textField>
<reportElement x="0" y="0" width="70" height="30" uuid="e75ddd33-0068-4ca8-986e-4204d8d984ac"/>
<textElement textAlignment="Center" verticalAlignment="Middle"/>
<textFieldExpression><![CDATA[$F{PRODCODE}]]></textFieldExpression>
</textField>
</jr:columnHeader>
<jr:columnFooter style="Table_CH" height="30" rowSpan="1"/>
<jr:detailCell style="Table_TD" height="30"/>
</jr:column>
<jr:column width="80" uuid="cebaa293-7447-4bda-8550-dd99efb418d8">
<property name="com.jaspersoft.studio.components.table.model.column.name" value="Column5"/>
<jr:tableHeader style="Table_TH" height="30" rowSpan="1">
<staticText>
<reportElement x="0" y="0" width="80" height="30" uuid="ad7c45d4-6497-4ec0-b2cb-a9e4a67fd379"/>
<textElement textAlignment="Center" verticalAlignment="Middle"/>
<text><![CDATA[Product]]></text>
</staticText>
</jr:tableHeader>
<jr:tableFooter style="Table_TH" height="30" rowSpan="1"/>
<jr:columnHeader style="Table_CH" height="30" rowSpan="1">
<textField>
<reportElement x="0" y="0" width="80" height="30" uuid="4a00dfe2-1bce-4b46-ab4f-101e6913227a"/>
<textElement textAlignment="Center" verticalAlignment="Middle"/>
<textFieldExpression><![CDATA[$F{PRODDESCRIPTION}]]></textFieldExpression>
</textField>
</jr:columnHeader>
<jr:columnFooter style="Table_CH" height="30" rowSpan="1"/>
<jr:detailCell style="Table_TD" height="30"/>
</jr:column>
<jr:column width="70" uuid="4bedd6b6-ae00-42f4-85c4-865aba65f3ef">
<property name="com.jaspersoft.studio.components.table.model.column.name" value="Column6"/>
<jr:tableHeader style="Table_TH" height="30" rowSpan="1">
<staticText>
<reportElement x="0" y="0" width="70" height="30" uuid="dab68c15-87aa-4784-938f-8c5551cf6614"/>
<textElement textAlignment="Center" verticalAlignment="Middle"/>
<text><![CDATA[Quantity]]></text>
</staticText>
</jr:tableHeader>
<jr:tableFooter style="Table_TH" height="30" rowSpan="1"/>
<jr:columnHeader style="Table_CH" height="30" rowSpan="1">
<textField>
<reportElement x="0" y="0" width="70" height="30" uuid="302a334d-6cdd-4040-bc6c-1a30f8f3c991"/>
<textElement textAlignment="Center" verticalAlignment="Middle"/>
<textFieldExpression><![CDATA[$F{quantity}]]></textFieldExpression>
</textField>
</jr:columnHeader>
<jr:columnFooter style="Table_CH" height="30" rowSpan="1"/>
<jr:detailCell style="Table_TD" height="30"/>
</jr:column>
<jr:column width="60" uuid="a0ae5441-5952-4f0e-9b72-84ff9103c697">
<property name="com.jaspersoft.studio.components.table.model.column.name" value="Column7"/>
<jr:tableHeader style="Table_TH" height="30" rowSpan="1">
<staticText>
<reportElement x="0" y="0" width="60" height="30" uuid="9ec5d0c4-2702-4c45-9a95-d221162bb3fd"/>
<textElement textAlignment="Center" verticalAlignment="Middle"/>
<text><![CDATA[Sold]]></text>
</staticText>
</jr:tableHeader>
<jr:tableFooter style="Table_TH" height="30" rowSpan="1"/>
<jr:columnHeader style="Table_CH" height="30" rowSpan="1">
<textField>
<reportElement x="0" y="0" width="60" height="30" uuid="2e3a490f-14e3-472a-87cd-3c479f1b9720"/>
<textElement textAlignment="Center" verticalAlignment="Middle"/>
<textFieldExpression><![CDATA[$F{sold}]]></textFieldExpression>
</textField>
</jr:columnHeader>
<jr:columnFooter style="Table_CH" height="30" rowSpan="1"/>
<jr:detailCell style="Table_TD" height="30"/>
</jr:column>
<jr:column width="50" uuid="d14dc35e-35e4-4f4b-8f4a-a1b4e7032b08">
<property name="com.jaspersoft.studio.components.table.model.column.name" value="Column8"/>
<jr:tableHeader style="Table_TH" height="30" rowSpan="1">
<staticText>
<reportElement x="0" y="0" width="50" height="30" uuid="632d9d6e-a8db-4786-b721-7f7ea0635d82"/>
<textElement textAlignment="Center" verticalAlignment="Middle"/>
<text><![CDATA[Amount]]></text>
</staticText>
</jr:tableHeader>
<jr:tableFooter style="Table_TH" height="30" rowSpan="1"/>
<jr:columnHeader style="Table_CH" height="30" rowSpan="1">
<textField>
<reportElement x="0" y="0" width="50" height="30" uuid="5b4d1c56-f492-48b4-909a-0573bd5c6ab3"/>
<textElement textAlignment="Center" verticalAlignment="Middle"/>
<textFieldExpression><![CDATA[$F{amount}]]></textFieldExpression>
</textField>
</jr:columnHeader>
<jr:columnFooter style="Table_CH" height="30" rowSpan="1"/>
<jr:detailCell style="Table_TD" height="30"/>
</jr:column>
<jr:column width="45" uuid="ee6bcb90-3c23-4536-a559-cf3cea2ab9e3">
<property name="com.jaspersoft.studio.components.table.model.column.name" value="Column9"/>
<jr:tableHeader style="Table_TH" height="30" rowSpan="1">
<staticText>
<reportElement x="0" y="0" width="45" height="30" uuid="3af67385-3602-4aed-a194-1818756af2bf"/>
<textElement textAlignment="Center" verticalAlignment="Middle"/>
<text><![CDATA[Debtors]]></text>
</staticText>
</jr:tableHeader>
<jr:tableFooter style="Table_TH" height="30" rowSpan="1"/>
<jr:columnHeader style="Table_CH" height="30" rowSpan="1">
<textField>
<reportElement x="0" y="0" width="45" height="30" uuid="eccfdd04-6de4-4b6b-befe-7bdcdedc0241"/>
<textElement textAlignment="Center" verticalAlignment="Middle"/>
<textFieldExpression><![CDATA[$F{debtors}]]></textFieldExpression>
</textField>
</jr:columnHeader>
<jr:columnFooter style="Table_CH" height="30" rowSpan="1"/>
<jr:detailCell style="Table_TD" height="30"/>
</jr:column>
</jr:table>
</componentElement>
</band>
</detail>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？