使用css更改图像的大小

changing the size of an image with css

本文关键字：图像 css 使用      更新时间：2023-09-26

是否可以用css更改图像的大小？我想使用缩略图，但遇到了问题。。。但后来我想，用css改变图像的大小可能吗？例如

<style>
#a{
    .height:70px;
    .width:70px;
}
</style>
<div id = "a">
<img src="{{post.image}}" />
</div>

我试过了，但没用。。。。有人知道为什么吗？

在这里，https://blog.openshift.com/day-16-goose-extractor-an-article-extractor-that-just-works/他们使用javascript或jquery来控制图像的大小，他们是如何做到的？有人能告诉我如何将其与我的<img src="{{post.image}}" /> 结合起来吗

<script type="text/javascript" src="static/js/jquery.js"></script>
<script type="text/javascript">
    $("#myform").on("submit", function(event){
        $("#result").empty();
        event.preventDefault();
        $('#loading').show();
        var url = $("#url").val()
        $.get('/api/v1/extract?url='+url,function(result){
            $('#loading').hide(); 
            $("#result").append("<h4>"+result.title+"</h4>");
            $("#result").append("<img src='"+result.image+"' height='300' width='300'</img>");
            $("#result").append("<p class='lead'>"+result.text+"</p>");
    })

    });
</script>

试试这个：

<style>
.my-size{
  height: 100px !important;
  width: 100px !important;
}
</style>

在您的html 中

<img src="{{post.image}}" class="my-size"/>

如果您需要其他方面的帮助，请随时撰写评论

您正在更改包含图像的块的大小，但不更改图像本身。

#a img {
  height: 70px;
  width: 70px;
}
<div id="a">
  <img src="http://d30y9cdsu7xlg0.cloudfront.net/png/304282-200.png" />
</div>

此外，CSS属性前面没有点：）

Kim，你可能想看看用CSS按比例调整图像大小？它可能会帮助你找到解决方案。

相关文章：