Question

我想制作一条带有一些特定和基本约束的图像线。

挑战：图像必须全部具有相同的高度。但是我不在乎最后我能达到什么高度。图像文件具有不同的比率。图像必须保留其原始比例。线的宽度是屏幕的宽度。因此，该宽度根据用户的设备是可变的。我希望它适用于n img； n∊ [2; 6]

真正的挑战是，在较小的屏幕宽度下，行为仍然保持不变！

我在下面的flexbox上得到了完美的结果。但是此代码仅适用于Firefox。在其他浏览器上，我不能将屏幕的宽度和宽度强加于行，以减少要保留的图像，或者图像失去其比例。

可以看到我的尝试on this fiddle

HTML

<div>
    <img src="https://www.tlpro.fr/data/img/artspreview/4CroquisTim.jpg">
    <img src="https://www.tlpro.fr/data/img/artspreview/4SerresJardinDesPlantes01.jpg">
    <img src="https://www.tlpro.fr/data/img/artspreview/5Dessin6FranchissementRail2.jpg">
    <img src="https://www.tlpro.fr/data/img/artspreview/6bergersbiny08.jpg">
    <img src="https://www.tlpro.fr/data/img/artspreview/4house2.jpg">
</div>

CSS

body{padding:0px;margin:0px;background-color:#4c3b25;}
div{
    margin-top: 8px;
    border-top: #f9992a solid 5px;
    border-bottom: #f9992a solid 5px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    max-height: 400px;
}
div>img{
    max-height: 400px;
    margin: 0px 10px;
    padding: 15px 0px;
}

可以在此处看到预期结果（img）：https://ask.tlpro.fr/stackoverflow/001/st001.jpg

Answer 1

在CSS中，尝试在width:auto选择器中添加div>img

Answer 2

我能找到的唯一解决方案是为每个图像设置不同的宽度，因为尺寸是不同的。通过这种方法，您可以承担责任。结果如下：

DECLARE @DaysPast TABLE(
    Diff SMALLINT
)
DECLARE @MaxDaysPast SMALLINT=30;

WITH DaysPast(Diff) AS   
(  
    SELECT 0
    UNION ALL  
    SELECT Diff+1
    FROM DaysPast
    WHERE Diff<=@MaxDaysPast
)
INSERT INTO @DaysPast(Diff)
    SELECT *  
    FROM DaysPast  
    WHERE Diff<=@MaxDaysPast;

Select  
    case
        when Cast(ILE.[Posting Date] as date) <  Cast(DATEADD(DAYS,-1*dp.Diff,Getdate() as date)  then cast(ILE.Quantity as Numeric(19,6))
        else 0
    end AS [Opening],
    case
        when Cast(ILE.[Posting Date] as date) <=  Cast(DATEADD(DAYS,-1*dp.Diff,Getdate() as date)  then cast(ILE.Quantity as Numeric(19,6))
        else 0
    end AS [Closing]
from  [Item Ledger Entry] ILE
inner join @DaysPast dp ON Cast(ILE.[Posting Date] as date) <= Cast(DATEADD(DAYS,-1*dp.Diff,Getdate() as date)

  body { 
    padding:0px;
    margin:0px;
    background-color:#4c3b25;
  }
  
  div {
    margin-top:8px;
    border-top:#f9992a solid 5px;
    border-bottom:#f9992a solid 5px;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 0 15px;
  }

  div > img {
    max-height:100%;
    padding:15px 0px;
    display: block;
  }

  div > img:nth-child(1) {
    width: 16%;
  }

  div > img:nth-child(2) {
    width: 21%;
  }

  div > img:nth-child(3) {
    width: 32%;
  }

  div > img:nth-child(4) {
    width: 14.3%;
  }

  div > img:nth-child(5) {
    width: 14.4%;
  }

Answer 3

这是我想出的。 Chrome似乎对我有用：

body {
  padding: 0px;
  margin: 0px;
  background-color: #4c3b25;
}

.container {
  margin-top: 8px;
  border-top: #f9992a solid 5px;
  border-bottom: #f9992a solid 5px;
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.item {
  margin: 15px 3px;
}

.item img {
  max-height: 100px;
  max-width: 100%;
}

<div class="container">
  <div class="item">
    <img src="https://www.tlpro.fr/data/img/artspreview/4CroquisTim.jpg">
  </div>
  <div class="item">
    <img src="https://www.tlpro.fr/data/img/artspreview/4SerresJardinDesPlantes01.jpg">
  </div>
  <div class="item">
    <img src="https://www.tlpro.fr/data/img/artspreview/5Dessin6FranchissementRail2.jpg">
  </div>
  <div class="item">
    <img src="https://www.tlpro.fr/data/img/artspreview/6bergersbiny08.jpg">
  </div>
  <div class="item">
    <img src="https://www.tlpro.fr/data/img/artspreview/4house2.jpg"></div>
</div>

容器的高度由图像的高度控制，而不是由图像的高度控制。然后，我将每张图片的宽度设置为100％，这样一来，当您用尽水平空间时，它的尺寸就会缩小。

我还为这些项目添加了一些水平边距，以确保在缩小图像时它们之间始终存在一点距离。

CSS定位：显示一行不同比例的图像

3 个答案: