Scale an Image to Maximally Fit Available Space and Center It

Is there a CSS way to scale an image to fill available space between two other block-level elements on an A4 page?

The following code will help you to show an image that occupies the remaining space in the body. The amount of space the image occupies depends on the space remaining which is inline with your question. Modify as per as your needs

html,body {  height: 100%;}
* {  padding: 0;  margin: 0;  border: 0;  outline: none;  font-family: sans-serif;  box-sizing: border-box;}
.print-body {  display: flex;  border: 1px solid #e0e0e0;  padding: 10px;  flex-direction: column;  margin: 10px;  height: 100%;}
.header {  color: white;  background-color: #f90;  padding: 10px;  text-align: center;}
.image {  display: flex;  background-image: url(https://via.placeholder.com/1280x720);  margin: 10px 0;  background-size: cover;  background-position: center;  background-repeat: no-repeat;  flex: 1;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script><div class="print-body">  <div class="header">Header</div>  <div class="image"></div>  <div class="footer">    <div class="item">item # 1</div>    <div class="item">item # 2</div>  </div></div>

Resize html image in Weebly to available space

Try this css on your image11. Maybe your looking something like this one LiveOnFiddle

       .two_img {    display: inline-flex;      }    .image11 {    max-width: 100%;    display: block;    margin: 0 auto;    -webkit-transition: all 0.7s ease;    transition: all 0.7s ease;  border: 1px solid red; /*only for view both image are separete */  }    .image11:hover {    opacity: 0.6;    filter: alpha(opacity=60);  }
   

<div class="two_img"><a href="link"> <img class="image11" src="http://www.w3schools.com/css/trolltunga.jpg"></a><a href="link"> <img class="image11" src="http://www.w3schools.com/css/trolltunga.jpg"> </a></div>

Resizing ImageView to all available space

Wrap the ImageView in a Pane and bind it's fitWidth/fitHeight properties to the size of this Pane. Additionally make the ImageView unmanaged and set the preferred size for the Pane:

<center>
    <Pane fx:id="container" prefWidth="100" prefHeight="100">
        <children>
            <ImageView id="imageDisplay" fx:id="imageDisplay" cache="true" cacheHint="SPEED" depthTest="ENABLE" nodeOrientation="INHERIT" pickOnBounds="true" preserveRatio="true"
                       fitWidth="${container.width}" fitHeight="${container.height}"
                       smooth="false" managed="false"/>
        </children>
    <Pane>
</center>

private void setDefaultImage() {
    imageDisplay.setImage(new Image("images/dirt.jpg"));
}

CSS scale down image to fit in containing div, without specifing original size

You can use a background image to accomplish this;

From MDN - Background Size: Contain:

This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.

Demo

CSS:

#im {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("path/to/img");
    background-repeat: no-repeat;
    background-size: contain;
}

HTML:

<div id="wrapper">
    <div id="im">
    </div>
</div>

How do you stretch an image to fill a div while keeping the image's aspect-ratio?

Update 2019.

You can now use the object-fit css property that accepts the following values: fill | contain | cover | none | scale-down

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

As an example, you could have a container that holds an image:

<div class="container">
    <img src="" class="container_img" />
</div>

.container {
    height: 50px;
    width: 50%;
}

.container_img {
    height: 100%;
    width: 100%;
    object-fit: cover;
} 

CSS force image resize and keep aspect ratio

img {  display: block;  max-width:230px;  max-height:95px;  width: auto;  height: auto;}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p><img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">

Maximum possible size image and div expanding to fill the space

I've edited the code your solution is this what you want ? I'm not sure..

https://jsfiddle.net/vjLps7qs/6/

It becomes :

  .container {
    width: calc(100vw);
    height: 100vh;
    overflow: hidden;
  }

  .top {
    height: 1.25em;
    padding: 3px;
    background: yellow;
    display: flex;
    flex-direction: row;
  }

  .innerCtr {
    height: 100%;
    overflow: hidden;
  }

  .left {
    height: 100%;
    background: red;
    overflow: hidden;
  }

  .right {
    max-height: 100%;
    max-width: 80%;
    calc(100% - 1.25rem);
    background: blue;
    float: right;
    object-fit: contain;
    overflow: hidden;
    position: relative;
    top: calc(50% - 1.25rem);
    transform: translateY(-52%) scale(0.95);
  }

added calc, which is supported by all major browsers

  .right {
    calc(100% - 1.25rem);
    top: calc(50% - 1.25rem);
  }

Again, I'm very sorry if that wasn't what you were looking for but this thread is hard to navigate.

How to make image fit to div and centered at the same time?

you can use display flex:

.div {
  border: 1px solid;
  display: flex;
  justify-content: center;
  align-items: center;
}
img {
  max-width: 100%;
  max-height: 100%;
}

.portrait {
  height: 80px;
  width: 30px;
}

.landscape {
  height: 30px;
  width: 80px;
}

.square {
  height: 75px;
  width: 75px;
}

Portrait Div
<div class="portrait div">
  <img src="http://i.stack.imgur.com/xkF9Q.jpg" />
</div>
Landscape Div
<div class="landscape div">
  <img src="http://i.stack.imgur.com/xkF9Q.jpg" />
</div>
Square Div
<div class="square div">
  <img src="http://i.stack.imgur.com/xkF9Q.jpg" />
</div>

---

Related Topics