CSS 将图像压缩到容器中的媒体查询
CSS media-query to squeeze image into container
我被迫使用基于 table 的布局,并且需要使其响应。
我正在努力处理图像:当图像宽度超过屏幕宽度时,它应该缩小以适合屏幕。
在这里的几篇文章中,我发现 max-width
被推荐,但不知何故我没有让它工作。
这是我的代码:
.headerImg { max-width: 100%; }
@media (max-width: 600px) {
.mainTabWidth {width: 100%;}
.halfWitdth {width: 50%;}
.qWidth {width: 25%;}
}
@media (min-width: 601px) {
.mainTabWidth {width: 594px;}
.halfWidth {width: 236px;}
.qWidth {width: 113px;}
}
<body style="font-family: Arial;font-size: 12pt;margin:0px;">
<table align="center" border="0" cellpadding="0" cellspacing="0"
style="border-collapse: collapse;" class="mainTabWidth">
<tbody>
<tr>
<td style="padding: 10px;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</td>
</tr>
<tr>
<td><img src="http://mbaas.de/wordle.png" class=
"headerImg" /></td>
</tr>
</tbody>
</table>
</body>
在这种情况下,更改 media queries
的顺序以及您的图片
是一种更好的方法
when the image-width exceeds the screen-width, it should shrink to fit
on the screen.
这里是你需要做的:
- 将 table-layout:fixed 添加到您的
.mainTabWidth
.mainTabWidth {
table-layout: fixed;
}
.headerImg {
max-width: 100%;
}
@media (min-width: 601px) {
.mainTabWidth {
width: 594px;
}
.halfWidth {
width: 236px;
}
.qWidth {
width: 113px;
}
}
@media (max-width: 600px) {
.mainTabWidth {
width: 100%;
}
.halfWitdth {
width: 50%;
}
.qWidth {
width: 25%;
}
}
<body style="font-family: Arial;font-size: 12pt;margin:0px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;" class="mainTabWidth">
<tbody>
<tr>
<td style="padding: 10px;">
<img class="headerImg" src="http://lorempixel.com/1000/300" />
</td>
</tr>
<tr>
<td style="padding: 10px;">This text is embedded in a cell of table-row where the table is styled with a media-query, in the width is >607px, the table should be 594px wide and on smaller screens (max-width: 600px), the table should fill the available space to a 100%. But
if you resize and observe, you will see the contrary: on large screens, the table takes all space and on small screens it takes 594px - so it seems the wrong query is selected...??? Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
</tr>
</tbody>
</table>
</body>
我被迫使用基于 table 的布局,并且需要使其响应。
我正在努力处理图像:当图像宽度超过屏幕宽度时,它应该缩小以适合屏幕。
在这里的几篇文章中,我发现 max-width
被推荐,但不知何故我没有让它工作。
这是我的代码:
.headerImg { max-width: 100%; }
@media (max-width: 600px) {
.mainTabWidth {width: 100%;}
.halfWitdth {width: 50%;}
.qWidth {width: 25%;}
}
@media (min-width: 601px) {
.mainTabWidth {width: 594px;}
.halfWidth {width: 236px;}
.qWidth {width: 113px;}
}
<body style="font-family: Arial;font-size: 12pt;margin:0px;">
<table align="center" border="0" cellpadding="0" cellspacing="0"
style="border-collapse: collapse;" class="mainTabWidth">
<tbody>
<tr>
<td style="padding: 10px;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</td>
</tr>
<tr>
<td><img src="http://mbaas.de/wordle.png" class=
"headerImg" /></td>
</tr>
</tbody>
</table>
</body>
在这种情况下,更改 media queries
的顺序以及您的图片
when the image-width exceeds the screen-width, it should shrink to fit on the screen.
这里是你需要做的:
- 将 table-layout:fixed 添加到您的
.mainTabWidth
.mainTabWidth {
table-layout: fixed;
}
.headerImg {
max-width: 100%;
}
@media (min-width: 601px) {
.mainTabWidth {
width: 594px;
}
.halfWidth {
width: 236px;
}
.qWidth {
width: 113px;
}
}
@media (max-width: 600px) {
.mainTabWidth {
width: 100%;
}
.halfWitdth {
width: 50%;
}
.qWidth {
width: 25%;
}
}
<body style="font-family: Arial;font-size: 12pt;margin:0px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;" class="mainTabWidth">
<tbody>
<tr>
<td style="padding: 10px;">
<img class="headerImg" src="http://lorempixel.com/1000/300" />
</td>
</tr>
<tr>
<td style="padding: 10px;">This text is embedded in a cell of table-row where the table is styled with a media-query, in the width is >607px, the table should be 594px wide and on smaller screens (max-width: 600px), the table should fill the available space to a 100%. But
if you resize and observe, you will see the contrary: on large screens, the table takes all space and on small screens it takes 594px - so it seems the wrong query is selected...??? Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
</tr>
</tbody>
</table>
</body>