Different widths imgs

[demmacs]

Hi sp

I am having some troubles with a rating application that generate a random image when the user press shuffle

I need the image to be displayed in the middle of the screen with margin:0 auto;
I need the rating stars to be displayed in the bottom left corner of the current image
I need the average to be displayed in the bottom right corner of the current image

Does anyone have any ideas on how to solve this on different widths images?

HTML

    <div id="babesyes">
    <img src="#" id="img">
    <span class="rating"></span>
    <div id="preview"></div>
    </div>
    <div id="newimage" class="btn">New image</div>

CSS

    .rating span:before {
        content: "\2605";
    }
    .rating .blank:before {
        content: "\2605";
        color:green;
    }
    .rating {
        font-size: 26px;
        display:block;
        z-index:2;
        position:relative;
        margin:0 auto;
        left:5px;
    }
    #preview {
        font-size: 14px;
        position:relative;
        z-index:2;
        text-align:right;
    }
    .btn {
        background-color: blue;
        border: none;
        color: #fff;
        padding: 5px;
        text-align: center;
        text-decoration: none;
        position:relative;
        display:inline-block;
        float:none;
        font-size: 16px;
        top:450px;
    }

    #babesyes{
        position:absolute;
        display:inline-block;
        width:100%;
    }

    #img{
        display:block;
        z-index:1;
        position:relative;
        height:450px;
        margin:0 auto;
    }

JQUERY

    $(document).ready(function(e) {
        var newload = true;
        var randomimage = 0;
        
        $('#newimage').click(function(){
            loadimage();
    });


    $('.rating').on('mouseenter','span', function(){
        $(this).toggleClass('blank');
    });
    $('.rating').on('mouseleave','span', function(){
        $(this).toggleClass('blank');
    });

        $('.rating').on('click','span',function(){
            if(newload){
            var index = $(this).index()+1;
            var dataString = 'image='+randomimage+'&vote='+index;
            $('rating span').css("color","black");
            $(this).prevAll().css("color","green");
            $(this).css("color","green");
            
            
            $.ajax({
            type: "POST",
            url:"add.php",
            data: dataString,
            datatype:"json",
            success: function(data){
                console.log(data);
                newload = false;
            }
        });
            console.log(index);
            }
        });

    function loadimage(){
        $('.rating').html('');
        $('.rating').append('<span></span><span></span><span></span><span></span><span></span>');
            newload=true;
        
        $.ajax({
            type: "POST",
            url:"server.php",
            datatype:"json",
            success: function(data){
                console.log(data);
                randomimage = data['id'];
                $("#img").attr("src",data['image']);
                $("#preview").html('Total Votes ' + data['votes']+' Average '+data['average']);
                
            }
        });
        
    }
    });

[SamA74]

Not sure if this is what you wanted, but it seems to work.
I added an outer wrapper for the image with relative positioning to allow the rating and preview to be absolutely positioned on the image, bottom left and right.
The tricky bit is, getting the wrapper to “shrink wrap” down to the size of the image, especially as the image size will vary. To do that I used flex box, so it won’t work in IE<=9, but it is of course fully responsive with any given image size.

[demmacs]

This actually exactly what i needed thanks alot champ