In the upper-left block of my page, there is an image of piano keys within a 2x2 container div. The container class is called nav-blocks, and each individual block is identified by the class nav-block. Each block contains the image with the class nav-block-img. Borders have been added for visual clarity.
My desired layout includes:
- The image should stretch horizontally to fill the entire width of the block. I have set the
nav-block-imgclass tomin-width:100%, achieving the desired effect. - If the block's width becomes narrower than the image's width, I want the middle of the image to be displayed rather than being anchored to one side as seen in the screenshot. When using
float:leftorfloat:right, the image does not behave as intended.
I am seeking a solution where the image is centered within the block as it shrinks horizontally, allowing both sides of the image to be evenly visible. Despite trying various suggestions, I have been unable to achieve this within my current framework.
.nav-blocks {
margin-top: 10px;
border-style: solid;
border-width: 1px;
width: 100%;
height: 100%;
}
.nav-block {
border-style: solid;
border-width: 1px;
float:left;
width:50%;
height:50%;
}
img.nav-block-img {
min-width: 100%;
}