Question

我希望单个图像列可以缩放到视口高度，同时保持其纵横比。

我有一个有效的演示：https://codepen.io/garethj/pen/qrjjvp

我遇到的问题是链接没有环绕图像，因此命中区太大（并且会干扰其他UI元素）。设置要显示的标签：阻止图像包裹，但会杀死调整大小。

还有另一种方法可以解决这个问题吗？

var hasError = true;
$(form).find("input").each(function(){
  if($(this).val() == ''){
        $(this).parent().addClass('has-error');
         hasError = true;
    }else{
        $(this).parent().removeClass('has-error');
        $(this).parent().addClass('has-success')
         hasError = false;
    }

});

if(!hasError){
        $.ajax({
            type: 'ajax',
            method: 'POST',
            url: url,
            data: data,
            async: false,
            dataType: 'json',
            success: function(response){
                if(response.success){ 
                    $('#myModal').modal('hide');
                    $('#myForm')[0].reset();
                    if(response.type == "add"){
                        var type = 'added';
                    } else if(response.type == "edit"){
                        var type = 'updated';
                    }
                    $('.alert-success').html('User '+type+' succesfully').fadeIn().delay(4000).fadeOut('slow');
                    showAllUser();
                } else{
                    alert('Error');
                }
            },
            error: function(){
                alert("Failed to add");
            }
        });
    }

CSS：

<section id="projects">

<a href="#"><img src="http://new.eighthday.modxcloud.com/images/20-42.0.6cbcd440.jpg" /></a>
<h2>Project one</h2>


<a href="#"><img src="http://new.eighthday.modxcloud.com/images/20-42.0.6cbcd440.jpg" /></a>
<h2>Project two</h2>

</section>

https://codepen.io/garethj/pen/qrjjvp

Answer 1

将您的显示更改为内联，并将您的填充顶部更改为margin-top。

img {
  display: inline;
  margin-top: 100px;
}

https://codepen.io/anon/pen/MpEdzV

这不能解决你的问题吗？

Answer 2

这样的东西？

html,
body,
#projects {
  height: 100%;
  margin: 0;  
}

#projects {
  margin: 0 auto;
  text-align: center;
  width: 50%;
  
}


h2 {
  margin: 20px 0 100px 0;
  font-weight: normal;
  font-size: 20px;
}

img {
  display: flex;
  width: auto;
  height: 100vh;
  max-width: 100%; 
  margin: 0px auto;
  padding-top: 100px;
 }

@media (max-width: 900px) {
  img {
    max-height: calc(100% - 0px);
    padding-top: 0px;
  }
  
  h2 {margin-bottom:0px;}
}


/* demo stylin' */

body {
  font-size: 24px;
  font-family: arial;
  font-weight: normal;

}

<section id="projects">

<a href="#"><img src="https://new.eighthday.modxcloud.com/images/20-42.0.6cbcd440.jpg" /></a>
<h2>Project one</h2>


<a href="#"><img src="https://new.eighthday.modxcloud.com/images/20-42.0.6cbcd440.jpg" /></a>
<h2>Project two</h2>

</section>

Answer 3

试试这个。
添加一个类以将<a>标记为您的css代码a{display:inline-block;} 使用img{}修改课程max-width:300px; width:100% 您的图像将以最大宽度300px 显示，但如果需要，它们将会调整大小。

img {
  display: block;
  width: auto;
  height: auto;
  width: 100%;
  max-height: calc(100% - 200px);
  margin: 0px auto;
  padding-top: 100px;
  max-width:300px
}
a{display:inline-block;}

如果有效，请告诉我。

基于视口高度的图像列表，具有比例调整大小

3 个答案: