Изображения очень большие и смещены в моем контейнере ⇐ Javascript

[Anonymous]

У меня есть вывод, он дает мне нежелательный результат с некоторыми изображениями, которые я загрузил на веб -сайт, чтобы создать или создать библиотеку плагинов Fotorama jQuery JavaScript, я сделал весь процесс точно так же, как инструкции указывают на веб -сайте jQuery и на изображениях. очень большие и смещенные в моем контейнере, я сделал несколько устранения неполадок, и ничего нельзя сделать, чтобы регулировать изображения, чтобы изображения соответствовали контейнеру и уменьшали их до соответствующего размера. Пожалуйста, дайте мне знать, что я должен делать в дополнение к тому, что я уже сделал. Спасибо! Продолжайте отображаться в размере не вписываться с контейнером и чрезмерно большим, что их нельзя контролировать или манипулировать. = "Snippet-Code">
.grid.content {
display: flex;
/*Use flexbox layout */
flex-direction: column;
/* Arrange items vertically */
justify-content: center;
/* Center items vertically */
align-content: center;
/* Center items horizontally */
padding: 20px;
background-color: #f8f9fa;
border-radius: 10px;
border: 1px solid #007bff;
min-height: 300px;
/* Ensure the container has some height */
text-align: center;
/* Ensure text is centered */
}

.grid.content {
grid-column: span 2;
/*Each takes up two columns */
grid-row: auto;
/* Auto height based on content */
}

.grid.content .section .narrow-paragraph {
max-width: 1000px;
/* Limit the width for narrow paragraphs */
margin: 0 auto;
/* Center the content horizontally */
text-align: justify;
/* Justify text for better readability */
}

/* Styling the image wrapper */
.image-wrapper {
display: flex;
/* Use flexbox to control alignment */
justify-content: center;
/* Center the image horizontally */
align-items: center;
/* Center the image vertically */
margin: 15px 0;
/* Add some vertical margin for spacing */
padding: 10px;
/* Add padding around the image */
background-color: #f0f0f0;
/* Light background color */
border-radius: 10px;
/* Consistent border radius */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
/* Subtle shadow effect */
max-width: 100%;
/* Ensure the wrapper does not exceed the container width */
}

/* Ensure existing .the-image styles are maintained */
.image-wrapper .the-image {
width: 100%;
max-width: 500px;
height: auto;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-top: 20px;
}

.fotorama {
width: 100%;
/* Ensure the gallery takes the full width of its container */
height: auto;
/* Maintain aspect ratio */
max-width: 1000px;
/* Set a maximum width to prevent it from being too large */
margin: 0 auto;
/* Center the gallery within its container */
}

.fotorama img {
max-width: 100%;
/* Ensure images do not exceed the container width */
max-height: 100%;
/* Allow images to expand based on content */
height: auto;
/* Maintain aspect ratio */
}< /code>





Who Are We?

This is a website that will help you choose travel insurance
according to your needs and budget. Travel insurance has different coverage
and plans that will help you travel to your destination safely and protected.
More than just offering you travel insurance. We give you risk prevention tips.










Our service is completely free, we present the various modalities,coverage
and benefits so that you can choose the one that best suits your needs and
budgets.We help you summarize the general, particular and special conditions of
your travel assistance contract, we review and check your certificate,
so that everything is in accordance with the quote presented.







< /code>
< /div>
< /div>
< /p>
Эти файлы уже проверили в валидаторах инструментов, это часть Мой код, это не полный код. Работает над корректировкой изображений, я применяю правила каскада, специфичности, наследования и селекторов. Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/794 ... -container