jquery or css for dynamic image fixed size in mvc

Question

Im looking for a jquery script or css that can resize all my images to 700x400 at full window height and width but still keep bootstraps image-responsive capability when resizing the browser. Currently my images are displaying at there full size and I am dynamically adding the images, there output looks like this:

However it should look like this:

My View looks like this:

            <div class="col-md-4 portfolio-item">
                <a href="@Url.Action("Details", "Post", new { urlslug = item.UrlSlug })">
                    <img class="img-responsive" src="@Html.Raw("data:image/jpeg;base64," + images.Single(image => image.Key == item.Id).Value)" alt="">
                </a>
                <h3>
                    <a href="@Url.Action("Details", "Post", new { urlslug = item.UrlSlug })">@Html.DisplayFor(modelItem => item.Title)</a>
                </h3>

                <p>@Html.DisplayFor(modelItem => item.ShortDescription)</p>
                @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
                @Html.ActionLink("Details", "Details", new { urlslug = item.UrlSlug }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.Id })
            </div>

Answer 1

May I suggest if you want to go the CSS route, using a container for the images. Essentially what I mean is something like the following:

::::HTML::::

<!--  creates a container for your image -->
<div id="imageDiv">
     <img src='yourImageHere'>
</div>

::::CSS::::

/* modify the container you created to be a set width-height */
#imageDiv{
  width: 400px;
  height: 700px;
  overflow: hidden; /* essential, hides the overflow from the image */
}

#imageDiv img{
  width: 100%;  /* makes image 100% width of the container */
  position: relative; /* allows movement inside the container */
      /* OPTIONAL: use this to adjust where the 'center' starts */
      /* only useful on images that will be clipped */
  top: -__px;  
}

I'm not 100% on the code, thats from memory. But essentially in English what its supposed to do is create a container for the image that you have control over the size. After you create the container you add an image inside it.

The CSS is a little bit of a trick. Essentially the overflow: hidden; allows you to hide the scroll bars on the container for any pictures you input larger then your needed size.

In the next chunk we set the image to width: 100%; which makes the image fill the container we created (If most of your images are PORTRAIT and not LANDSCAPE I recommend changing this to height: 100%; instead, this will allow it to fill 100% of the height of the container.

The position: relative; just allows us to move around our image inside the container we just created.

From there we use positional elements in this case top: -__px to move the image up. IF you ended up using height: 100%; due to portrait images, you may want to tweak images either left: or right: to get the desired look.

---

I hope this helps. Because these elements have a set size, you WILL most likely have to recreate media queries for them, unless however you put them within a BOOTSTRAP styled col-sm-3 or some other column amount, which would automatically do the reorganizing of the elements, just not the resizing.

The nice thing is though, for the media query you'd write, you'd only need to change the width: 400px; and height: 700px; of the container, all the image elements would automatically resize due to being set to 100% of its parent element, in this case #imageDiv

Hope that helps, or is what you were looking for. It is a nice way to create a container for images, that won't distort them upon rendering if they aren't the same size. I DO HOWEVER RECOMMEND USING IMAGES WITH A SIMILAR ASPECT RATIO, just makes life easier. Please leave a comment if it isn't and maybe I'd be able to help more. If it is what you wanted, glad I could help!

---

EDIT

Bootstrap Responsive Images may be useful in styling the images. But you'd still need to alter the size of the parent element in CSS. So kind of moot. However, using % or vh/vw based widths and heights for the parent container would make it all resize automatically.

If you are unfamiliar with 'vh/vw' its a new unit of measure in CSS3, essentially it means viewport height/width. So 100vh would set something to be the full height of the screen, without knowing the actual pixel size of it(sounds alot like %, I know, but it comes in really handy when say trying to make a sidebar or a body at that height, you don't need to worry about the %, position:absolute or container hacks to fill the window. It was made to dynamically resize as well, but, as it stands I believe only Firefox dynamically resizes vh/vw elements.

https://css-tricks.com/viewport-sized-typography/

Answer 2

If I understand the question correctly, you want to have an image of any size displayed in a 700 x 400 element at maximum width or height.

• The best way to do that would be to resize the images dynamically on the server. Since you're using ASP, this Stack Overflow thread addresses that
• The easiest way to do this in the browser, if you're going to require users to use modern (IE 9+) browsers, is to use the CSS Background Size property , which allows you various ways to fill the element
• If you really want to do it programmatically, you can use a JQuery plugin like Image Resize

Best of luck! Let us know what you wind up doing.

Answer 3

I would use a photo editing program to resize the images to 700x400. Your images are all different heights and widths so when you resize them automatically they will either get cut off or stretched out. It would be better if you made a new file in an image editor that was 700x400 and resized your images how you want them. That way it will work just how you have it set up in bootstrap right now, with the responsive image resizing and they will never be larger than your maximum width and height of 700x400.