Question

我想使两个图像以类似于here的固定高度响应。

我创建了jsfiddle

以某种方式添加换行符太早。我尝试添加width=auto，但这没有用。而且，如果在一定宽度后变成单列，那将是很好的。

Answer 1

不清楚您要问什么，但是有几种方法可以使图像以固定的高度和流体宽度响应。

最简单的方法是使用object-fit: cover规则。尝试将object-fit: cover添加到您的.image元素中。

https://www.w3schools.com/css/css3_object-fit.asp

这将强制其填充容器而不扭曲其尺寸。

如果要构建2列网格，则需要使用calc设置容器的宽度，并删除所有偶数容器上的边距。

.container {
  width: calc(50% - 10px);
  margin-right: 20px;
  float: left;
}

.container:nth-child(2n) {
  margin-right: 0;
}

.image {
  object-fit: cover;
  height: 412px;
}

我在这里修改了您的js小提琴：https://jsfiddle.net/hnxz7co9/34/

Answer 2

您的图像不能排成两行的原因是您没有足够的空间来执行此操作。您已将图像宽度设置为48％。如果将图像外的所有水平边距和水平边距相加，则会发现它们的总和等于可用宽度的百分之四，因此第二张图像会跳到下一行。我在您的jsfiddle中发现，将图像宽度更改为47％，或者将右侧边距更改为10px，或者将右侧边距更改为1％，则每行可以显示两张图像。

如果将宽度表示为百分比，而将填充和边距表示为像素，则必须计算涉及的总像素，并确保有足够的空间容纳两幅图像以适合一行。为此，可以像Daniel Bernardi的回答中那样使用calc()函数，或者如果您希望边距随着图像大小调整大小，则可以将其设置为百分比而不是硬像素值。

关于在较小的屏幕上每行更改为一张图像，我将从阅读@media开始。这使您可以为不同尺寸的屏幕设置不同的CSS规则。因此，如果您的屏幕小于特定尺寸，请将图片的宽度设置为100％，减去空白和边距。

Answer 3

实际上，当您告诉图像显示块和高度一些值时，您就最声明了 宽度：自动

当您告诉图像宽度一些值然后告诉高度自动时。

当您中断此选项时，图片会拉伸，您需要一侧或侧边的高度或宽度。

body {
    font-family: sans-serif;
    margin: auto;
    max-width: 1280px;
}

.site-content {
    position: relative;
}

.max-column {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.container {
    width: 42%;
    height: 412px;
    display: inline-block;
    overflow: hidden;
    margin-bottom: 20px;
    margin-right: 20px;
    line-height: 0px;
    position: relative;
}

.image {
    opacity: 1;
    display: block;
    height: 412px;
    width: auto;
    transition: .5s ease;
    backface-visibility: hidden;
}

.middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.container:hover .image {
    -webkit-filter: brightness(70%);
    -moz-filter: brightness(70%);
    -o-filter: brightness(70%);
    -ms-filter: brightness(70%);
    filter: brightness(70%);
    opacity: 1.0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.container:hover .middle {
    opacity: 1;
}

.text {
    color: white;
    font-size: 16px;
    padding: 16px 32px;
}

    <div class="site-content max-column">

        <div class="container">
            <img src="https://images.freeimages.com/images/large-previews/10f/autumn-1-1382513.jpg" alt="Avatar" class="image">
            <div class="middle">
                <div class="text">

                    <h1>Works</h1>
                    <p> Is the music</p>
                </div>
            </div>
        </div>
        <div class="container">
            <img src="https://images.freeimages.com/images/large-previews/e01/lrt-interior-1626389.jpg" alt="Avatar" class="image">
            <div class="middle">
                <div class="text">

                    <h1>Works</h1>

                    <p> Is the music</p>
                </div>
            </div>
        </div>
        <div class="container">
            <img src="https://images.freeimages.com/images/large-previews/035/young-golden-retriever-1404848.jpg" alt="Avatar" class="image">
            <div class="middle">
                <div class="text">

                    <h1>Works</h1>

                    <p> Is the music</p>
                </div>
            </div>
        </div>


    </div>

== 谢谢 ==

Answer 4

您必须使用背景图片而不是图片

<div class="site-content max-column">
    <div class="container">
        <div class="image img1"></div>
        <div class="middle">
            <div class="text">
                <h1>Works</h1>
                <p> Is the music</p>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="image img2"></div>
        <div class="middle">
            <div class="text">
                <h1>Works</h1>
                <p> Is the music</p>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="image img3"></div>
        <div class="middle">
            <div class="text">
                <h1>Works</h1>
                <p> Is the music</p>
            </div>
        </div>
    </div>
</div>
body {
    font-family: sans-serif;
    margin: auto;
    max-width: 1280px;
}

.site-content {
    position: relative;
}

.max-column {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.container {
    width: 48%;
    height: 412px;
    display: inline-block;
    overflow: hidden;
    margin-bottom: 20px;
    margin-right: 20px;
    line-height: 0px;
    position: relative;
}

.image {
    opacity: 1;
    display: block;
    height: 412px;
    width: 100%;
    transition: .5s ease;
    backface-visibility: hidden;
}

.middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.container:hover .image {
    -webkit-filter: brightness(70%);
    -moz-filter: brightness(70%);
    -o-filter: brightness(70%);
    -ms-filter: brightness(70%);
    filter: brightness(70%);
    opacity: 1.0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.container:hover .middle {
    opacity: 1;
}

.text {
    color: white;
    font-size: 16px;
    padding: 16px 32px;
}
.img1{
    background: url('https://images.freeimages.com/images/large-previews/10f/autumn-1-1382513.jpg');
    background-size: cover;
    background-position: center;
}
.img2{
    background: url('https://images.freeimages.com/images/large-previews/e01/lrt-interior-1626389.jpg');
}
.img3{
    background: url('https://images.freeimages.com/images/large-previews/035/young-golden-retriever-1404848.jpg');
    background-size: cover;
    background-position: center;
}

demo

如何使两个图像以固定高度和纯CSS响应？

4 个答案: