कोड के साथ इस लिंक से मेरा यही मतलब था।

<!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>

उस कोड के साथ, तीन छवियों के साथ एक पंक्ति होती है और यदि स्क्रीन का आकार बदल दिया जाता है तो वे 3 छवियां आनुपातिक रूप से बड़ी/छोटी हो जाती हैं।

मैंने इंटरनेट से 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 कोड में से एक उन तीन छवियों को बढ़ने/संकुचित नहीं करता है।

तो मैंने इस तरह की शैली को बदलने की कोशिश की:

  <style amp-custom>
  .container {
    display: flex;
    flex-direction: row;
    max-width: 450px;
    height: 200px;
    margin:auto;
  }

  </style>

जब मैं स्क्रीन का आकार बदलता हूं, तो उन तीन छवियों की चौड़ाई बढ़ती/घटती है, लेकिन ऊंचाई नहीं। इसलिए मैंने height: 200px; को max-height: 200px; में बदलने की कोशिश की, फिर तीनों छवियां चली गईं (कोई प्रदर्शन नहीं)। वही परिणाम अगर मैंने उस शैली में ऊंचाई विशेषता हटा दी है, तो कोई प्रदर्शन नहीं।

मेरा प्रश्न:
मैं कोड कैसे लिखूं ताकि जब मैं स्क्रीन का आकार बदलूं तो चौड़ाई और ऊंचाई आनुपातिक रूप से चले?

1
karma 8 अक्टूबर 2018, 17:45

1 उत्तर

सबसे बढ़िया उत्तर

अपनी शैली को इस प्रकार बदलें:

 .container {
    display: flex;
 }

 .child-flex-default{
    width: 100%; // Or 33.33%, or whatever. Just make sure you specify in %
 }

अब, आपको अपने amp-img टैग को layout="responsive" के साथ इस प्रकार बदलना होगा:

<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 अनुपात को बनाए रखते हुए प्रतिक्रियात्मक रूप से आकार बदलेंगी।

1
Chris Aby Antony 9 अक्टूबर 2018, 06:02