title: jquery or css for dynamic image fixed size in mvc
body: <p>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:</p>
  
  <p><img src="https://i.stack.imgur.com/bnRLz.jpg" alt="enter image description here"></p>
  
  <p>However it should look like this:</p>
  
  <p><img src="https://i.stack.imgur.com/J3F0t.jpg" alt="enter image description here"></p>
  
  <p>My View looks like this:</p>
  
  <pre><code>            &lt;div class="col-md-4 portfolio-item"&gt;
                  &lt;a href="@Url.Action("Details", "Post", new { urlslug = item.UrlSlug })"&gt;
                      &lt;img class="img-responsive" src="@Html.Raw("data:image/jpeg;base64," + images.Single(image =&gt; image.Key == item.Id).Value)" alt=""&gt;
                  &lt;/a&gt;
                  &lt;h3&gt;
                      &lt;a href="@Url.Action("Details", "Post", new { urlslug = item.UrlSlug })"&gt;@Html.DisplayFor(modelItem =&gt; item.Title)&lt;/a&gt;
                  &lt;/h3&gt;
  
                  &lt;p&gt;@Html.DisplayFor(modelItem =&gt; item.ShortDescription)&lt;/p&gt;
                  @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
                  @Html.ActionLink("Details", "Details", new { urlslug = item.UrlSlug }) |
                  @Html.ActionLink("Delete", "Delete", new { id = item.Id })
              &lt;/div&gt;
  </code></pre>