用css改变图像的大小[重复]

Posted 2023-02-24

【中文标题】用css改变图像的大小[重复]

【英文标题】：changing the size of an image with css [duplicate]

【发布时间】：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标签改变图片大小吗？

【参考方案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 ^^