【问题标题】:changing the size of an image with css [duplicate]用css改变图像的大小[重复]
【发布时间】:2016-04-11 07:44:25
【问题描述】:

是否可以使用 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>

【问题讨论】:

  • 从 CSS 中删除句点(.height 应该是高度)
  • @user2182349 图片还是一样
  • img标签中的高度和宽度覆盖了CSS
  • 可以用img标签改变图片大小吗?

标签: javascript jquery html css django


【解决方案1】:

试试这个:

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

在你的 html 中

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

如果您需要其他方面的帮助,请随时编写 cmets

【讨论】:

  • 非常感谢,我给下面的答案支票,因为它已经先张贴,但安德森席尔瓦先生的答案也有效......希望他不会在我身上使用 UFC ^ ^
  • 别担心,写信给我
【解决方案2】:

您正在更改包含图像的块的大小,而不是图像本身。

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

另外,CSS 属性前面没有点 :)

【讨论】:

    【解决方案3】:

    Kim,您可能想看看Resize image proportionally with CSS?,它可能会帮助您找到解决方案。

    【讨论】:

    • 非常感谢,我给这个答案是因为它已经先发布了,但安德森席尔瓦先生的答案也有效......希望他不会在我身上使用 UFC ^^
    猜你喜欢
    • 2017-08-11
    • 2022-11-22
    • 1970-01-01
    • 2011-11-05
    • 1970-01-01
    • 2023-04-10
    • 2017-04-19
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多