What is the best way to adjust the image on mobile portrait view to ensure it fits properly without distorting the aspect

Question

What is the best way to adjust the image on mobile portrait view to ensure it fits properly without distorting the aspect

I am facing a perplexing issue with my code. It seems that simply using height: auto; is causing the image to disappear, so I have resorted to manually setting the height to a specific number like 700px. You can refer to this JSFiddle for more details.

Is there a way to maintain the width and height of the image in portrait view on mobile devices?

Here is the HTML code:

<div style="background-image: url(&quot;https://mario.nintendo.com/static/fd723b2893d4d2b39ef71bfdb4e3329c/579b4/mario-background.png&quot;);" class="cpi-wall-detailed-image"></div>

And here is the CSS code:

.cpi-wall-detailed-image {
    width: 100%;
    height: 768px;
}

html css debugging

Answer 1

Answer №1

Here is a suggested code snippet for you to try:

.cpi-wall-detailed-image {
  width: 100%;
  height: 768px;
}

@media only screen and (max-width: 600px) {
  .cpi-wall-detailed-image {
  zoom:0.5
}
}
@media only screen and (max-width: 475px) {
  .cpi-wall-detailed-image {
  zoom:0.4
}
}

Answer 2

Here is a suggested code snippet for you to try:

.cpi-wall-detailed-image {
  width: 100%;
  height: 768px;
}

@media only screen and (max-width: 600px) {
  .cpi-wall-detailed-image {
  zoom:0.5
}
}
@media only screen and (max-width: 475px) {
  .cpi-wall-detailed-image {
  zoom:0.4
}
}

Answer 3

Answer №2

give this a try:

.cpi-wall-detailed-image {
  width: 100%;
  height: 2316px;
}

@media only screen and (max-width: 600px) {
  .cpi-wall-detailed-image {
  zoom:0.37
}
}
@media only screen and (max-width: 475px) {
  .cpi-wall-detailed-image {
  zoom:0.325
}
}

Answer 4

give this a try:

.cpi-wall-detailed-image {
  width: 100%;
  height: 2316px;
}

@media only screen and (max-width: 600px) {
  .cpi-wall-detailed-image {
  zoom:0.37
}
}
@media only screen and (max-width: 475px) {
  .cpi-wall-detailed-image {
  zoom:0.325
}
}

What is the best way to adjust the image on mobile portrait view to ensure it fits properly without distorting the aspect

Answer №1

Answer №2

Similar questions

Is there a way to retrieve the modal's viewport height in Angular?

Ways to specify distinct css styles according to varying number of elements

How can the input value be transmitted along with the formArray values?

Rearrange the order of divs dynamically to prevent wrapping/overflow, no need for media queries

Customize the style attribute in Bootstrap 4 using Popper.js

Adjustable value range slider in HTML5 with ng-repeat directive in AngularJs

I must design a unique layout for my website

Ways to modify styles defined in the global style.scss file using a child component's CSS and constraining it to affect only that specific component

Top choice for mobile app error reporting and logging

Trouble with CSS submenus: Are your lists not appearing as they should? Potential style override

The issue arises when radio buttons allow for multiple selections and labels cannot be displayed in a single row

issues arising from a growing css division

"What is the best way to programmatically set all options as selected in an HTML select element using JavaScript

Issue with AngularJs NgRoute

Focused input filter in a tabular header style

The loading of the Bootstrap tagsinput has encountered an error

What is the best way to gather Data URI content through dropzone.js?

Conceal a section of a container with the click of a button within a WordPress Plugin

Tips for positioning "THANK YOU" in the center

Create a dynamic JavaScript animation with frames