Question

我正在制作一个布局，使用 Zurb Foundation 6.4.3 XY网格卡组件创建图像网格。我的所有图像实际上都是320x180像素。但是，当我运行以下代码时，图像会变得拉长。

我是CSS3 Flexbox和Foundation XY Grid的新手，无法找到这里发生的事情。如果有人帮我找到解决方案，我将不胜感激。

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css" rel="stylesheet"/>

<div class="grid-container">
  <div class="grid-x medium-up-3">

    <div class="cell">
      <div class="card">
        <img src="https://i.stack.imgur.com/XE9GX.png`enter code here`" />


      </div>
    </div>
    <div class="cell">
      <div class="card">

        <img src="https://i.stack.imgur.com/XE9GX.png" />


      </div>
    </div>
    <div class="cell">
      <div class="card">

        <img src="https://i.stack.imgur.com/XE9GX.png" />


      </div>
    </div>
    <div class="cell">
      <div class="card">

        <img src="https://i.stack.imgur.com/XE9GX.png" />


      </div>
    </div>
    <div class="cell">
      <div class="card">

        <img src="https://i.stack.imgur.com/XE9GX.png" />


      </div>
    </div>
    <div class="cell">
      <div class="card">
        <img src="https://i.stack.imgur.com/XE9GX.png" />


      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

将// Create a new instance of the Firefox driver WebDriver driver = new FirefoxDriver(); // And now use this to visit Google driver.get("http://www.google.com"); //Create and initialize an instance of Screen object Screen screen = new Screen(); //Add image path Pattern image = new Pattern("C:\\searchButton.png");添加到您的align-self（拉伸默认情况下，img属性为align-items flex方向）。您还可以将stretch添加到align-items: center。

如果需要，您也可以为card投入width: 100%（图片可以均匀缩放） - 请参阅下面的演示：

＆＃13;

img

＆＃13;

.card img {
  align-self: center;
}

＆＃13;

基于基础的解决方案是使用：

使用<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css' /> <div class="grid-container"> <div class="grid-x medium-up-3"> <div class="cell"> <div class="card"> <img src="https://i.stack.imgur.com/XE9GX.png`enter code here`" /> </div> </div> <div class="cell"> <div class="card"> <img src="https://i.stack.imgur.com/XE9GX.png" /> </div> </div> <div class="cell"> <div class="card"> <img src="https://i.stack.imgur.com/XE9GX.png" /> </div> </div> <div class="cell"> <div class="card"> <img src="https://i.stack.imgur.com/XE9GX.png" /> </div> </div> <div class="cell"> <div class="card"> <img src="https://i.stack.imgur.com/XE9GX.png" /> </div> </div> <div class="cell"> <div class="card"> <img src="https://i.stack.imgur.com/XE9GX.png" /> </div> </div> </div> </div>和grid-x作为网格包装。
对 cell 使用以下标记：
```
align-center
```

见下面的演示：

＆＃13;

<div class="shrink cell">
  <div class="card">
    <img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
  </div>
</div>

＆＃13;

如何阻止图像在Foundation 6.4.3卡中的Flexbox容器内拉伸？

1 个答案: