Member Avatar for bufospro

Hi,
I want to insert in my home page a weather forecast.
So I found a site that generates code for weather.

The site is http: // freemeteo . com / default.asp?pid=183&la=1

The problem I have is that the image which is generated is higher than I want. I would prefer 250 *60.

And with divs I can't do it.

Could someone help me?

  • 4 Contributors
  • 3 Replies
  • 102 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Wrams

Dani AI

Generated

— a few practical ways to get the widget to appear as a 250×60 box without visually stretching it. was right that simply forcing width/height on the image will distort the aspect ratio. Two safer options are: (A) let the image fill and be cropped by the container (preserves proportions), or (B) use the image as a CSS background and let the browser cover/crop it.

Example: crop the hotlinked image cleanly with CSS object-fit

<div class="weather-box">
  <img src="..." alt="forecast">
</div>

.weather-box { width:250px; height:60px; overflow:hidden; }
.weather-box img { width:100%; height:100%; object-fit:cover; display:block; }

If object-fit is not available in an older browser, use a background image instead:

.weather-bg { width:250px; height:60px;
              background-image:url(...);
              background-size:cover;
              background-position:center; }

Two important notes: 1) If you hotlink a provider image, check their terms — some services disallow hotlinking or only provide fixed sizes. Hosting and resizing a copy yourself (with permission) is often the simplest way to control exact output. 2) For high-DPI displays, serve a higher-resolution source via srcset or a larger background image so scaled-down pixels remain crisp.

For browser compatibility and details on these properties see MDN: object-fit and MDN: background-size. and raised the right points about using CSS and accessibility — keep the alt text and make sure the image is display:block to avoid inline whitespace.

Recommended Answers

All 3 Replies

Member Avatar for Airshow

As far as I can see, freemeto makes its images available only in certain sizes which you select from a menu.

You can force the image to the size you want with :-

<img src="" width="250" height="60">

but this will distort the image if its aspect ratio is different from 250:60.

Airshow

Edited by Airshow because: n/a
Member Avatar for SKANK!!!!!

like airshow stated u can alos force the size you like but u dont need to do it in a style tag. u can label the item as an

id="poopie"

then in the css stylesheet go like this:

#poopie{width:250px}

and so forth

Edited by SKANK!!!!! because: n/a
Member Avatar for Wrams

As was already atated this is the best way

<img src="images/logo.png" width="250" height="60" alt="logo">

Don't forget the Alt tag to make it valid. This also helps with screen readers for blind people viewing your web site.


@ SKANK!!!!!

That is a Div your using, this will not size your image in certain browsers so your just creating more problems doing it that way.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.