Question

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

Answer 1

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

<div id="a">
  <img src="http://d30y9cdsu7xlg0.cloudfront.net/png/304282-200.png" />
</div>

<script type="text/ng-template" id="dashboard_assigngroup_popup.html">

    <div class="modal-header modal-header2">
        <h3 class="modal-title">Assign Chart Group</h3>
    </div>

    <div class="modal-body">
        <table class="table">
            {%verbatim %}

            <tr>
                <td>
                    <div class="input-group" style="padding:1%;">
                        <span class="input-group-addon">Chart title</span>
                        <select type="input" class="form-control" ng-model="final_data.info" ng-options="m.id as m.title for m in chartlist" required ng-cloak>
                        </select>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="input-group" style="padding:1%;">
                        <span class="input-group-addon">Chart group</span>
                        <select type="input" class="form-control" ng-model="final_data.group" ng-options="c.id as c.name for c in chartgrouplist" required ng-cloak>
                        </select>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="5">
                    <div class="input-group" style="padding:1%;">
                        <span class="input-group-addon">Order </span>
                        <input type="input" class="form-control" placeholder="Order" ng-model="final_data.orderg">
                    </div>
                </td>
            </tr>

            <tr>
                <td colspan="4">
                    <div class="modal-footer">
                        <button class="btn btn-success" type="button" ng-click="submit()" id="submit">Save</button>
                        <button class="btn btn-grey" type="button" ng-click="cancel()">Discard</button>
                    </div>
        </table>
        {% endverbatim %}
    </div>

</script>

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

Answer 2

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

Answer 3

试试这个：

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

你的HTML中的

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

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

用css改变图像的大小

3 个答案: