Question

我有以下元素：

 <td>
                        <h4 style="margin-top:16px;">Your images</h4>

                        <div  id="container">
                        <img src="http://thumb101.shutterstock.com/thumb_large/1207028/413816437/photo-413816437.jpg">
                            <img src="http://thumb9.shutterstock.com/thumb_large/1207028/238987906/photo-238987906.jpg">
                            <img src="http://thumb101.shutterstock.com/thumb_large/1207028/233499883/photo-233499883.jpg">
                            <img src="http://thumb7.shutterstock.com/thumb_large/1207028/232630345/photo-232630345.jpg">
                            <img src="http://thumb1.shutterstock.com/thumb_large/1207028/232630354/photo-232630354.jpg">
                        </div>
                    </td>


#container{
  border: 1px solid;
  box-sizing: border-box;
  display: flex;
  flex-flow: nowrap
}

img {
  max-width: 100%;
  height:auto
}

td包含4到8张图像。

但是，根据屏幕分辨率或图像数量，图像可以在屏幕上包裹并显示两行。

我想通过CSS实现的目标（如果可能的话？）是让图像始终在一行而不是包装。为此，我需要将图像自动调整大小。

Answer 1

尝试使用css规则：

<html>
<title>Demo</title>
<head>
    <style>
        td {
            width: auto;
            background-color: red;
            white-space: nowrap;
            overflow-x: scroll;
        }

        td img {
            width: 150px;
            background-color: green;
            display: inline-block;
            margin-left: 4px;

        }

    </style>
</head>
<body>

<table>
    <tr>
        <td>
            <h4 style="margin-top:16px;">Your images</h4>

            <div id="container">
                <img src="http://thumb101.shutterstock.com/thumb_large/1207028/413816437/photo-413816437.jpg">
                <img src="http://thumb9.shutterstock.com/thumb_large/1207028/238987906/photo-238987906.jpg">
                <img src="http://thumb101.shutterstock.com/thumb_large/1207028/233499883/photo-233499883.jpg">
                <img src="http://thumb7.shutterstock.com/thumb_large/1207028/232630345/photo-232630345.jpg">
                <img src="http://thumb1.shutterstock.com/thumb_large/1207028/232630354/photo-232630354.jpg">
            </div>
        </td>
    </tr>
</table>

</body>
</html>

Answer 2

你可以试试这段代码

<style>

        td {
            width: 100vw;
        }

        img {
            min-width: 24%;
        }

    </style>

根据您想要的1行图像更改最小宽度％。

如何使图像适合TD而不包装在不同的屏幕分辨率上？

2 个答案: