Thiết kế website giá rẻ

Question

I have the following code (simplified, I actually get the images from a server). The goal is to have the images shrink and grow to fill the entirety of the input_socket while keeping the buttons aligned to the left and right side. As you can see in the snippet, however, the image doesn’t scale and forces everything around it to move.

I’ve tried a bunch of things (I made another post about it a bit ago), but everything I try isn’t what I’m after (like simply hiding the excess instead of shrinking it). Am I using the wrong things here? Is the flex properties not what I want?

Any help at all would be greatly appreciated! (Also, apologies if I didn’t simply the .css enough! I didn’t want to accidentally give too little information.)

function moveSocketLeft() {
  index = index - 1 <= 0 ? placeholders.length - 1 : index - 1;
  img = document.getElementById('socket-image');
  img.src = placeholders[index]
}

function moveSocketRight() {
  index = index + 1 => placeholders.length ? 0 : index + 1;
  img = document.getElementById('socket-image');
  img.src = placeholders[index]
}


var index = 0;

const placeholders = [
  'https://place-hold.it/500x300', 
  'https://place-hold.it/300x500', 
  'https://place-hold.it/200x700',
  'https://place-hold.it/700x200', 
  'https://place-hold.it/900x1600', 
  'https://place-hold.it/1600x900'
];

/* General */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --background-color: #0f0f0f;
  --foreground-color: #282828;
  --text-color: #f1f1f1;
}

body {
  background-color: var(--background-color);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-color)
}


/* Top - Media Viewer */

.media-bar {
  height: 60vh;
  display: flex;
}


/* Viewer */

.media-viewer {
  width: 40vh;
  margin: 5px;
  outline: 2px solid var(--foreground-color);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.action-bar {
  margin: 3px;
  height: 30px;
  background-color: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn-action {
  margin-left: 3px;
  height: 24px;
  background-color: var(--foreground-color);
  border: transparent;
  border-radius: 5px;
  opacity: 50;
  color: var(--text-color);
}

.media-socket {
  margin: 0px 3px;
  background-color: var(--background-color);
  min-height: 300px;
  /* Temp */
  display: flex;
  flex-direction: row;
  justify-content: center;
  text-align: center;
  align-items: center;
}

.input-socket {
  width: 1250px;
  height: 100%;
  flex-shrink: 1;
  justify-content: center;
}

.input-socket-item {
  max-height: 100%;
}

.btn-socket {
  margin: 3px;
  height: 30px;
  width: 30px;
  background-color: var(--foreground-color);
  border: transparent;
  border-radius: 5px;
  opacity: 0.5;
  color: var(--text-color);
}

.media-selector {
  margin: 3px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-selector {
  width: 75px;
  border: transparent;
  background-color: transparent;
  color: var(--text-color);
  text-decoration: underline;
}


/* Editor */

.media-editor {
  width: 60vh;
  margin: 5px;
  display: flex;
  flex-direction: column;
  outline: 2px solid var(--foreground-color);
  border-radius: 5px;
}


/* Middle - Album Bar */

.album-bar {
  height: 15vh;
  display: flex;
}

.fav-socket {
  width: 15vh;
  margin: 5px;
  outline: 2px solid var(--foreground-color);
  border-radius: 5px;
}

.albums {
  margin: 5px;
  flex: 1;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  align-items: center;
  outline: 2px solid var(--foreground-color);
  border-radius: 5px;
}


/* Utils */

.display-text {
  margin: 3px;
}

.btn {
  min-width: 5px;
  min-height: 5px;
  padding: 3px;
  font: 16;
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Define And Conquer</title>
  <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
  <script src="{{ url_for('static', filename='scripts.js') }}"></script>
</head>

<body>
  <div class="media-bar">
    <div class="media-viewer">
      <div class="action-bar">
        <p class="display-text" id="file_name">Filename</p>
        <div class="btn-container">
          <button class="btn btn-action">Fav</button>
          <button class="btn btn-action">Fullscreen</button>
        </div>
      </div>
      <div class="media-socket">
        <button class="btn btn-socket" onclick="moveSocketLeft()"><</button>
        <div class="input-socket" id="input_socket">
          <img class="input-socket-item" id="socket_image" src="https://place-hold.it/500x300">
          <video class="input-socket-item" id="socket_video" display='none'></video>
        </div>
        <button class="btn btn-socket" onclick="moveSocketRight()">></button>
      </div>
      <div class="media-selector">
        <button class="btn btn-selector" id="first_media_selector">1</button>
        <p class="display-text">...</p>
        <button class="btn btn-selector" id="current_media_selector">2</button>
        <p class="display-text">...</p>
        <button class="btn btn-selector" id="last_media_selector">1386</button>
      </div>
    </div>
    <div class="media-editor">
    </div>
  </div>
  <div class="album-bar">
    <div class="fav-socket">
    </div>
    <div class="albums">
    </div>
  </div>
</body>

</html>

Thiết kế website giá rẻ

Danh mục

HTML images don’t scale correctly in flex boxes