Question

编辑了这个问题，因为解决了我的问题。

Answer 1

根据您的css文件，您有两种解决方法：

只需添加您要为图片显示大小提供的width和height女巫（快速，但没有响应网站的良好解决方案）;
在WP主题的类别布局文件中，将支持div标记中的图片代码包含给定width和height。

对于第一种情况，只需添加到您的css文件：

.avia-content-slider .slide-image, .avia-content-slider .slide-image img {
    border-radius: 3px;
    display: block;
    position: relative;
    -webkit-perspective: 1000px;
    -webkit-backface-visibility: hidden;
    margin: 0 auto;
    width: 100%;
    height: 200px;
}

对于第二个解决方案，尝试：

<div style=" width: 100%; height: 200px; ">
  <img width="495" height="400" src="http://studio10interiordesign.com/wp-
  content/uploads/2018/03/image006-495x400.png" class="attachment-portfolio 
  size-portfolio wp-post-image" alt="">
</div>

使用css for img tag：

.avia-content-slider .slide-image, .avia-content-slider .slide-image img { 
  border-radius: 3px; 
  display: block; 
  position: relative; 
  -webkit-perspective: 1000px; 
  -webkit-backface-visibility: hidden; 
  margin: 0 auto; 
  position: relative; 
  min-height: 100%; 
  min-width: 100%; 
  top: -50%; 
}

Answer 2

基本上，您无法将所有图像调整为相同尺寸，同时保持其比例和布局。但是，有一些技术可以使图像看起来非常精细并且不会像素化。

使用图像作为背景，如果您有一个具有固定高度和宽度的容器，请将图像与background-size: cover一起用作背景，以确保图像始终自动调整大小以适合在容器内。 background-position然后也可用于在容器内移动背景图像并显示最突出的部分。
使用object-fit。此css属性将切断图像的两侧，保留纵横比，并填充空间。但是，它仅在IE 16中受支持，因此如果您需要支持旧版本，则可能存在问题。

如何复制响应行为

2 个答案: