Question

我有这个网站：

代码HTML：

 <div class="grid-sizer"></div>

                      <!-- # ROW-1 # -->
                        <div class="row">
                            <div class="grid-item item-1" >
                                <img src="<?php echo ot_get_option('left1_img'); ?>" />
                            </div>

                            <div class="grid-item item-2">
                                <img src="<?php echo ot_get_option('center1_img'); ?>" />
                            </div>

                            <div class="grid-item item-3">
                                <img src="<?php echo ot_get_option('right1_img'); ?>" />
                            </div>
                        </div>
                      <!-- # ROW-2 # -->
                        <div class="row">
                            <div class="grid-item item-2">
                                <img src="<?php echo ot_get_option('left2_img'); ?>" />
                            </div>

                            <div class="grid-item item-1" >
                                <img src="<?php echo ot_get_option('center2_img'); ?>" />
                            </div>

                            <div class="grid-item item-3">
                                <img src="<?php echo ot_get_option('right2_img'); ?>" />
                            </div>
                        </div>

                        <!-- # ROW-3 # -->
                        <div class="row">
                            <div class="grid-item item-small">
                                <img src="<?php echo ot_get_option('left3_img'); ?>" />
                            </div>

                            <div class="grid-item item-medium" >
                                <img src="<?php echo ot_get_option('center3a_img'); ?>" />
                            </div>

                            <div class="grid-item item-small">
                                <img src="<?php echo ot_get_option('centerb_img'); ?>" />
                            </div>

                            <div class="grid-item item-2">
                                <img src="<?php echo ot_get_option('right3_img'); ?>" />
                            </div> 
                        </div>
                    </div>

CODE CSS：

/* ---- grid ---- */
.item-1,.item-3{
  width:40%;
}
.grid {
  background: #DDD;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */
.item-small{
  width: 20% !important;
}
.item-medium{
  width: 34% !important;
}
.item-2{
  width: 25% !important;
}
.grid-sizer,
.grid-item {
  width: 37.333%;
}

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  width: 100%;
}

我放置了一张图片，以便更好地了解他们想要做什么。

图像必须具有分辨率可调高度，具体取决于。

我尝试.grid-item img {height:316px;}，但低分辨率图像效果不佳。

他们想要的是始终拥有固定的高度相等的图片，并且在所有分辨率上看起来都很好。

您认为可以帮助我找到解决方案吗？

提前谢谢！

Answer 1

因为有几个固定的图像，您可以将它们放在一个img中。通过这种方式，您可以先验地调整图像。此外，加载单个img比加载几个img（看看Google“css sprite”）

便宜

如何在同一高度拍摄照片？

1 个答案: