Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Dynamic Responsive Resize Images

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #37546
    lickybuay
    Member

    I started working with responsive design and read that how to threat the images (dynamic):

    .midiv { width: 300px; float: left; }
    .midiv img { max-width: 100%; max-height: 100%; }

    But when i load the website it show’s the full size of the image, after full site download it fits the div’s size.

    Im using this too in the header area:

    js/modernizr-2.0.6.js
    js/css3-mediaqueries.js

    Here you can see it: http://clientes.web507.com/rdtest/motos.php

    what could be wrong in my way of doing?

    #104660
    pkinchla
    Participant

    The problem is not with your images. It’s with the rest of your layout. You have a fixed width wrapper to begin with. For an image to resize it needs to be inside of a fluid layout. Because you do not have a fluid base, media will not resize because all other elements do not resize because they have set pixel widths.

    article on fluid grids

    article about responsive web design but more importantly having a fluid base

    #104662
    lickybuay
    Member

    Let me see if i got it. because my layout is fixed first it takes the fullwidth of my wrapper and based on that it resizes the images. When it full loads takes the media queries stuff and mades the changes.

    #104670
    pkinchla
    Participant

    #promos .promoto figure, #listamotos .promoto figure {
    width: 100px;
    text-align: center;
    float: left;
    margin-left: 0;
    margin-right: 15px;
    }

    The key here is the-

    width : 100px

    your site will not be responsive with fixed width elements. media queries are only a part of making a site responsive.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.