amp-html 中的代码如何使多列图像响应?
how is the code in amp-html to have a multi column image responsive?
这就是我的意思,来自这个 link和代码
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.row {
display: flex;
}
/* Create three equal columns that sits next to each other */
.column {
flex: 33.33%;
padding: 5px;
}
</style>
</head>
<body>
<h2>Images Side by Side</h2>
<p>How to create side-by-side images with CSS Flexbox:</p>
<div class="row">
<div class="column">
<img src="img_snow.jpg" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="img_forest.jpg" alt="Forest" style="width:100%">
</div>
<div class="column">
<img src="img_mountains.jpg" alt="Mountains" style="width:100%">
</div>
</div>
</body>
</html>
使用该代码,一行包含并排的三张图片,如果调整屏幕大小,那么这三张图片会相应地按比例 bigger/smaller。
我在网上找到了关于 amp-html 的东西:
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>AMP #0</title>
<link rel="canonical" href="amps.html" >
<meta name="viewport" content="width=device-width,minimum-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
.container {
display: flex;
flex-direction: row;
width: 450px;
height: 200px;
margin:auto;
}
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<div class="container">
<amp-img class="child-flex-default" src="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n" layout=flex-item></amp-img>
<amp-img class="child-flex-default" src="https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w400-h300-no-n" layout=flex-item></amp-img>
<amp-img class="child-flex-default" src="https://lh3.googleusercontent.com/Z4gtm5Bkxyv21Z2PtbTf95Clb9AE4VTR6olbBKYrenM=w400-h300-no-n" layout=flex-item></amp-img>
</div>
</body>
</html>
但是当我调整屏幕大小时,amp-html 代码中的那个并没有生成那三个图像 grow/shrink。
所以我试着改变这样的风格:
<style amp-custom>
.container {
display: flex;
flex-direction: row;
max-width: 450px;
height: 200px;
margin:auto;
}
</style>
当我调整屏幕大小时,那三张图片的宽度确实 grow/shrink,但高度却没有。所以我试图将 height: 200px;
更改为 max-height: 200px;
然后所有三个图像都消失了(不显示)。如果删除那个样式的height属性也是一样的结果,没有显示。
我的问题:
如何编写代码才能在调整屏幕大小时使宽度和高度成比例?
改变你的风格如下:
.container {
display: flex;
}
.child-flex-default{
width: 100%; // Or 33.33%, or whatever. Just make sure you specify in %
}
现在,您必须使用 layout="responsive"
如下更改 amp-img
标签:
<amp-img width="150" height="200" layout="responsive" class="child-flex-default" src="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n"></amp-img>
<amp-img width="150" height="200" layout="responsive" class="child-flex-default" src="https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w400-h300-no-n"></amp-img>
<amp-img width="150" height="200" layout="responsive" class="child-flex-default" src="https://lh3.googleusercontent.com/Z4gtm5Bkxyv21Z2PtbTf95Clb9AE4VTR6olbBKYrenM=w400-h300-no-n"></amp-img>
请注意,当您使用响应式布局时,您必须指定 width
和 height
属性。现在,您的图片将根据您指定的 width
、height
比率调整大小。
这就是我的意思,来自这个 link和代码
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.row {
display: flex;
}
/* Create three equal columns that sits next to each other */
.column {
flex: 33.33%;
padding: 5px;
}
</style>
</head>
<body>
<h2>Images Side by Side</h2>
<p>How to create side-by-side images with CSS Flexbox:</p>
<div class="row">
<div class="column">
<img src="img_snow.jpg" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="img_forest.jpg" alt="Forest" style="width:100%">
</div>
<div class="column">
<img src="img_mountains.jpg" alt="Mountains" style="width:100%">
</div>
</div>
</body>
</html>
使用该代码,一行包含并排的三张图片,如果调整屏幕大小,那么这三张图片会相应地按比例 bigger/smaller。
我在网上找到了关于 amp-html 的东西:
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>AMP #0</title>
<link rel="canonical" href="amps.html" >
<meta name="viewport" content="width=device-width,minimum-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
.container {
display: flex;
flex-direction: row;
width: 450px;
height: 200px;
margin:auto;
}
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<div class="container">
<amp-img class="child-flex-default" src="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n" layout=flex-item></amp-img>
<amp-img class="child-flex-default" src="https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w400-h300-no-n" layout=flex-item></amp-img>
<amp-img class="child-flex-default" src="https://lh3.googleusercontent.com/Z4gtm5Bkxyv21Z2PtbTf95Clb9AE4VTR6olbBKYrenM=w400-h300-no-n" layout=flex-item></amp-img>
</div>
</body>
</html>
但是当我调整屏幕大小时,amp-html 代码中的那个并没有生成那三个图像 grow/shrink。
所以我试着改变这样的风格:
<style amp-custom>
.container {
display: flex;
flex-direction: row;
max-width: 450px;
height: 200px;
margin:auto;
}
</style>
当我调整屏幕大小时,那三张图片的宽度确实 grow/shrink,但高度却没有。所以我试图将 height: 200px;
更改为 max-height: 200px;
然后所有三个图像都消失了(不显示)。如果删除那个样式的height属性也是一样的结果,没有显示。
我的问题:
如何编写代码才能在调整屏幕大小时使宽度和高度成比例?
改变你的风格如下:
.container {
display: flex;
}
.child-flex-default{
width: 100%; // Or 33.33%, or whatever. Just make sure you specify in %
}
现在,您必须使用 layout="responsive"
如下更改 amp-img
标签:
<amp-img width="150" height="200" layout="responsive" class="child-flex-default" src="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n"></amp-img>
<amp-img width="150" height="200" layout="responsive" class="child-flex-default" src="https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w400-h300-no-n"></amp-img>
<amp-img width="150" height="200" layout="responsive" class="child-flex-default" src="https://lh3.googleusercontent.com/Z4gtm5Bkxyv21Z2PtbTf95Clb9AE4VTR6olbBKYrenM=w400-h300-no-n"></amp-img>
请注意,当您使用响应式布局时,您必须指定 width
和 height
属性。现在,您的图片将根据您指定的 width
、height
比率调整大小。