/    Sign up×
Community /Pin to ProfileBookmark

Image not scaling when put up onto the server

Copy linkTweet thisAlerts:
Jun 21.2017

Hi

I’m using a .png file to show my name on my website so I need it to scale to fit the width of the page but every time I put it up on our actual Ubuntu server it stops scaling.

[CODE]
<div class=”container”>
<div class=”jumbotron”>
<img src=”webname.png” style=” padding-bottom: 1.5rem;”>
[/CODE]

My CSS file then contains:

[CODE]
img {
height: auto;
max-width: 100%;
}
[/CODE]

I am doing this inside a bootstrap container but it works locally so I dont see the issue.
Any help would be greatly appreciated ?

to post a comment
HTML

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@Self_ImageJun 21.2017 — Hi, I would suggest to use the image as a CSS background, there is an elegant solution. Simply use cover or contain in the background-size CSS3 property.

<div class="container"></div>&#8203;

.container {

width: 150px;

height: 100px;

background-image: url("http://i.stack.imgur.com/2OrtT.jpg");

background-size: cover;

background-repeat: no-repeat;

background-position: 50% 50%;

}&#8203;

While cover will give you a scaled up image, contain will give you a scaled down image. Both will preserve the pixel aspect ratio.

If you need more support, we are here to help you. We are the Leading [b]**Links removed by Site Staff so it doesn't look like you're spamming us. Please don't post them again.** [/b] providing World Class Web Design and Development Solutions for Global players.
Copy linkTweet thisAlerts:
@jedaisoulJun 21.2017 — Hi and welcome to the site.

I may be missing something, but have you tried:
<i>
</i>img {
height: auto;
width: 100%;
}
Copy linkTweet thisAlerts:
@TheLankyBritauthorJun 21.2017 — Thanks for the help.

It turns out that it was just a problem with a "Vodafone secure net" bar at the top that was messing it up.
Copy linkTweet thisAlerts:
@auntniniJun 22.2017 — wish i could give better info, but sometimes i found including "auto" for second dimension (i.e., height) fouled things up. it was better just to include width (as a percentage %) and let the browse automatically scale the other dimension in aspect ratio.

as i said, i cannot back this up with a valid explanation.
×

Success!

Help @TheLankyBrit spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...