如何改变照片的方向?

时间:2019-08-26 18:46:50

标签: html css flexbox

我正在为一家面包店创建一个示例网站,并且我有三张可点击的照片,这些照片会转到该网站的其他页面。他们目前都坐在彼此的顶部,我希望他们彼此相邻。我对编码非常陌生,这也是我第一次在堆栈溢出上发表文章,所以让我知道是否需要澄清任何内容或发布更多代码。非常感谢您的帮助。

我尝试过img {flex-direction: row},并尝试将所有图像包装在div内,并像这样改变伸缩方向。

img {
  width: 170px;
  height: 170px;
  border-radius: 150px;
  border: solid white 3px;
  transition: transform .2s;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
}

img:hover {
  transform: scale(1.5);
}
<img src="https://images.unsplash.com/photo-1514432324607-a09d9b4aefdd? 
    ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60" alt="cup of coffee">

<div class="col-xs-12 col-sm-12 col-md-4 featured-gallery">
  <div class="col-sm-12 thumbnail text-center">
    <img alt="regional park A" class="img-responsive" src="https://images.unsplash.com/photo-1530019163123-f33edadb3833? 
     ixlib=rb- 
     1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
  </div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 featured-gallery">
  <div class="col-sm-12 thumbnail text-center">
    <img alt="regional park B" class="img-responsive" src="https://images.unsplash.com/photo-1509365465985-25d11c17e812? 
    ixlib=rb- 
    1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=375&q=80">
  </div>
</div>

我的预期结果是我的照片排成一排,但我的实际结果是我的照片排成一列。

5 个答案:

答案 0 :(得分:0)

您正在将Flexbox布局定位在没有任何子元素来处理方向的图像元素本身上。默认情况下,列具有block级别的行为,占据整个行。将图像包装在父容器中,然后像这样调整标记:

.container {
  display: flex;
  flex-direction: row;
}

img {
  width: 170px;
  height: 170px;
  border-radius: 150px;
  border: solid white 3px;
  transition: transform .2s;
  margin: 0 auto;
}

img:hover {
  transform: scale(1.5);
}
<div class="container">

  <div class="col-xs-12 col-sm-12 col-md-4 featured-gallery">
    <div class="col-sm-12 thumbnail text-center">
      <img src="https://images.unsplash.com/photo-1514432324607-a09d9b4aefdd? 
    ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60" alt="cup of coffee">
    </div>
  </div>
  
  <div class="col-xs-12 col-sm-12 col-md-4 featured-gallery">
    <div class="col-sm-12 thumbnail text-center">
      <img alt="regional park A" class="img-responsive" src="https://images.unsplash.com/photo-1530019163123-f33edadb3833? 
     ixlib=rb- 
     1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
    </div>
  </div>
  
  <div class="col-xs-12 col-sm-12 col-md-4 featured-gallery">
    <div class="col-sm-12 thumbnail text-center">
      <img alt="regional park B" class="img-responsive" src="https://images.unsplash.com/photo-1509365465985-25d11c17e812? 
    ixlib=rb- 
    1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=375&q=80">
    </div>
  </div>
  
</div>

答案 1 :(得分:0)

您接近!您需要的是一个环绕所有图像的父元素,并且是一个flexbox。然后,为每个img提供一个flex属性,以便flexbox父级知道如何缩放和缩放它们。

您可以在此处查看有关如何设置Flexbox的出色文章:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flexbox对此也可能有些大材小用,您可以将它们设置为display:inline,它们会并排放置。您可以在这里阅读有关内联vs块元素的更多信息:https://www.w3schools.com/html/html_blocks.asp

答案 2 :(得分:0)

您可以尝试以下规则:

    img
    {
        display:flex;
        flex-wrap:wrap;
    }

答案 3 :(得分:0)

您似乎正在使用Bootstrap的网格系统。您当前的设计摘要有效,但在技术上不正确,并且在前进时可能会遇到一些问题。

为确保布局能够更正,应该 。容器   。行      .col

当您在页面上添加更多行的内容时,这将变得很重要。 您可以在Bootstraps文档页面上查看常规布局。 https://getbootstrap.com/docs/4.3/layout/grid/

答案 4 :(得分:0)

在图像div周围放置一个“行” div