Ask for help from web programmers, my code problems

juhuaxin

<a style="position:fixed;bottom:0px;left:0px;right:0px;text-align:center;" href="link">     
    >    <img style="display: inline-block;"   width="600" height="150"  src="pictures linking" />    </a>


<a style="position:fixed;bottom:0px;left:0px;right:0px;text-align:center;" href="link">     
    >    <img style="display: inline-block;" max-width="100%" max-height="100%"  src="pictures linking" />    </a>

There is no problem with the above code on the PC side. The picture will float at the bottom and be centered. The two sides are transparent, but the mobile browser is not good. The picture only shows the left part, but the right part does not show. How to modify it? I want the PC and the mobile picture to adapt automatically at the same time.
Or,
Let this picture only be displayed on the mobile phone, not on the PC, because there are more visitors on the mobile phone, so PC visitors can be ignored.
Is there such code?

lucast

http://jsfiddle.net/
https://codepen.io/pen/

hammer

I suspect this is because, your picture is too big for mobile browser. Please consider using the html 5 element to add responsive images and your thing should look better.

hammer

I meant html5 picture element.

armandorg

Use some codepen ... etc. So we can take a closer look.

juhuaxin

@hammer said:
I suspect this is because, your picture is too big for mobile browser. Please consider using the html 5 element to add responsive images and your thing should look better.

Yes, it's wider than the mobile screen.

blackjack4494

You can use media queries since you are not using any framework. Basically you say what happens when the screen is size x then you want to resize the img etc.

It is kinda easy to learn and implement. Just need to google it

Harzem

max-width="100%" max-height="100%"

what is this abomination?

did you mean:
<img style="display: inline-block; max-width:100%; max-height:100%;" src="pictures linking" />

muffin

Can I introduce you to external css? @juhuaxin

bradel

I also think that it's because you have a picture that has much higher resolution then mobile browser can show. And using codepen.io or assignment help you can show your problem in more detail and get a solution, or at least advice on your task.

deank

External wss is what he needs.

bugrakoc

@deank said:
External wss is what he needs.

Trust me, internal WSS is the best.