changing the size of an image with css

Question

Is it possible to change the size of image with css? I was thinking to use thumbnail but having problem...but then I thought to myself, is it possible to change the size of an image with css? For example

<style>
#a{
    .height:70px;
    .width:70px;

}

</style>

<div id = "a">
<img src="{{post.image}}" />
</div>

I tried it, and it doesn't work....anyone knows why?

Here, https://blog.openshift.com/day-16-goose-extractor-an-article-extractor-that-just-works/ they are using javascript or jquery to control the size of an image, how are they doing that? Can someone tell me how I can incorporate this with my <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>

Remove the periods from your CSS (.height should be height) – user2182349 Jan 07 '16 at 02:19 — user2182349, Jan 07 '16 at 02:19
The height and width in the img tag are overriding the CSS – user2182349 Jan 07 '16 at 02:25 — user2182349, Jan 07 '16 at 02:25
is it possible to change the size of image with img tag? – Jan 07 '16 at 02:33 — , Jan 07 '16 at 02:33

score 2 · Answer 1 · answered Jan 07 '16 at 02:35

2

Try this:

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

in your html

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

if you need help with something else feel free to write comments

answered Jan 07 '16 at 02:35

Anderson Silva

638
1
9
18

1

Thank you very much, I'm giving the below answer the check because it has been posted first but the answer by Mr Anderson Silva also works...hopefully he doesn't use UFC on me^^ – Jan 07 '16 at 02:38
don't worry anything write me – Anderson Silva Jan 07 '16 at 02:46

score 1 · Answer 2 · answered Jan 07 '16 at 02:43

You're changing the size of the block that contains the image, but not the image itself.

#a img {
  height: 70px;
  width: 70px;
}

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

Also, CSS properties don't have dots in front of them :)

score 0 · Accepted Answer · edited May 23 '17 at 12:23

0

Kim, you may want to look at Resize image proportionally with CSS? it may help you figure out a solution.

edited May 23 '17 at 12:23

Community

1
1

answered Jan 07 '16 at 02:27

Dreampoet

72
1
7

Thank you very much, I'm giving this answer the check because it has been posted first but the answer by Mr Anderson Silva also works...hopefully he doesn't use UFC on me^^ – Jan 07 '16 at 02:37

changing the size of an image with css

3 Answers3